comps-dialog
1.0.15 • Public • Published 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事件 |
Package Sidebar
Install
Weekly Downloads