comps-dialog

vue + elementUI 基于 vue 和 elementUI 二次开发的弹窗组件，支持 el-dialog 基础功能，目的是提高开发效率，减少代码量。

---

开始

npm install comps-dialog --save

---

使用

import comDialog from 'comps-dialog'
Vue.use(comDialog)

<com-dialog
    :visible.sync="visible"
    :title="title"
    borderTop
    borderBottom
    @close="visible = false"
>
    <div>content</div>
    <div slot="footer">
        <el-button>btn</el-button>
        <el-button>btn</el-button>
    </div>
</com-dialog>

属性

参数	说明	类型	可选值	默认值
visible	是否显示 Dialog	Boolean	true/false	false
title	Dialog 的标题，也可通过具名 slot （见下表）传入	String
width	Dailgo的宽度	String		50%
fullscreen	是否全屏	Boolean	true/false	false
top	Dialog CSS 中的 margin-top 值	String		15vh
modal	是否需要遮罩层	Boolean	true/false	true
modalAppendToBody	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上	Boolean	true/false	true
closeOnPressEscape	是否可以通过按下 ESC 关闭 Dialog	Boolean	true/false	true
showClose	是否显示关闭按钮	Boolean	true/false	true
center	是否对头部和底部采用居中布局	Boolean	true/false	false
destroyOnClose	关闭时销毁 Dialog 中的元素	Boolean	true/false	false
borderTop	是否显示dialog内容上边框border	Boolean	true/false	false
borderBottom	是否显示弹窗内容下边框	Boolean	true/false	false
footerAligin	弹窗footer内容对齐方式	String	left/center/right	right
hidFooter	隐藏弹窗footer默认内容	Boolean	true/false	false
btnAttrObj	footer 按钮属性	Object	{size:''}
bgFooter	弹窗footer背景色	String
btns	弹窗footer按钮	Arrary	[{key:'',type:'',text}]

btns

name	说明
key	弹窗内容区域
type	primary/text/success/warning/danger
text	按钮文字

btnAttrObj

name	说明
size	default/small/mini

插槽

name	说明
——	弹窗内容区域
header	弹窗header区域
footer	弹窗footer区域

事件

事件名称	说明	参数
open	打开弹窗
close	关闭弹窗	返回弹窗的状态

方法

方法名称	说明
onClose	关闭弹窗方法，触发close事件