ThDialog弹窗

弹窗组件，支持弹窗/抽屉效果 支持v-model的方式控制组件的显示隐藏

依赖说明

该组件依赖 element-ui

基本使用

<!-html->
<th-dialog v-model="drawer" mode="drawer" title="资质信息">
  <div>slot...</div>
  <el-button slot="button" type="primary" :loading="submitLoading" @click="submitForm">确定</el-button>
</th-dialog>

//js
data() {
    return {
        submitLoading: false,
        drawer: false,
    }
},
methods: {
  submitForm(){
     this.submitLoading = true
     //....
  }
}

效果演示

Api

base

参数	说明	类型	默认值	可选值
mode	dialog为弹窗，drawer为抽屉	String	drawer	dialog,drawer
title	title 标题	String	--	--
size	宽度，默认600px，支持填写数字，数字+px，百分比三种形式	String	600px	600,600px,50%
showBottom	控制是否展示底部区域	Boolean	true	false
appendToBody	自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	Boolean	false	true
cancelText	关闭按钮文字，默认为关闭	String	关闭	--
slot	内容插槽	slot	--	--
button	按钮插槽	slot	--	--
fullscreen	全屏 (mode值为dialog使用)	Boolean	false	--
modal	模态遮罩背景	Boolean	true	--
showClose	是否显示关闭按钮 （fasle时右上角X以及取消按钮 都不显示）	Boolean	true	--
closeOnClickModal	是否可以通过点击 modal 关闭 Dialog	Boolean	true	--
closeOnPressEscape	是否可以通过按下 ESC 关闭 Dialog	Boolean	true	--