居中弹窗

界面效果

引用

在.vue文件中输入

<template>
    <!-- 弹窗组件 -->
    <ke-dialog
      v-if="dialog.visible"
      v-dialog-drag
      :visible.sync="dialog.visible"
      :title="dialog.title"
      width="800"
      :destroy-on-close="true"
      :show-ok-btn="false"
      :show-cancel-btn="false"
      :btns="dialogBtns"
      @close="cancelDialog"
    >
      <!-- <div slot="title">1</div>
      <div slot="footer">2</div> -->
      <div>
      </div>
    </ke-dialog>
</template>

<script lang='ts'>
import keDialog from "@/components/keDialog.vue";
@Component({
    components: {keDialog}
})
</script>

Attributes

名称	类型	说明	可选值	默认值
showTitle	Boolean	是否展示title		true
showFooter	Boolean	是否展示footer		true
showOkBtn	Boolean	是否显示 key 值为 ok 的确认按钮		true
showCancelBtn	Boolean	是否显示 key 值为 cancel 的取消按钮		true
btns	Array	其他按钮，可通过指定 key 值覆盖确认按钮和取消按钮的相关属性和方法,Button 按钮组件		[]
visible	Boolean	是否展示对话框		false
title	string	弹出框标题，也可通过具名 slot 传入		弹出框
width	string,number	弹出框宽度		50%
fullscreen	Boolean	是否全屏		false
modal	Boolean	是否有遮罩层		true
z-index	Number	是否自定义 dialog 的 zIndex 层级(和其他组件一起使用时产生冲突可能需要用到)		null
modal-append-to-body	Boolean	遮罩层是否遮挡整个界面		true
append-to-body	Boolean	自身是否插入至 body 元素上。		false
lock-scroll	Boolean	是否在 Dialog 出现时将 body 滚动锁定		true
custom-class	string	弹出框增加的样式名称
close-on-click-modal	Boolean	是否可以通过点击 modal 关闭 Dialog		false
close-on-press-escape	Boolean	是否可以通过按下 ESC 关闭 Dialog		false
show-close	Boolean	是否显示关闭按钮		true
before-close	function(done)，done 用于关闭 Dialog	关闭前的回调，会暂停 Dialog 的关闭
center	Boolean	是否对头部和底部采用居中布局		true
destroy-on-close	Boolean	关闭时销毁 Dialog 中的元素		false
ok-callback	function	确认按钮回调函数		null
cancel-callback	function	取消按钮回调函数		null
partial-dialog	boolean	是否为内容区域遮罩		false
container-selector	string	内容区域遮罩渲染的位置，需开启`partial-dialog`	合法的css选择器	section[loading-id="${location.hash.slice(1)}"]

Slot

name	说明
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

事件

方法名	说明	参数
open	Dialog 打开的回调
opend	Dialog 打开动画结束时的回调
close	Dialog 关闭的回调
closed	Dialog 关闭动画结束时的回调

results matching ""

No results matching ""