element-dialog
v0.1.4
Published
使用`this.$dialog`的形式使用`el-dialog` ##### 使用方法 ```js import 'el-global-dialog' ``` 在vue文件中 ```js this.$dialog({ title: '标题', width: '30%', message: (dialog) => { return ( <div>Hello World</div> ); } }) ``` ##### attributes 参数|说明|类型|可选值|
Downloads
2
Readme
$dialog
使用this.$dialog的形式使用el-dialog
文档地址
安装
npm install --save el-global-dialog使用方法
import 'el-global-dialog'在vue文件中
this.$dialog({
title: '标题',
width: '30%',
message: (dialog) => {
return (
<div>Hello World</div>
);
}
})attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | -------- |
| data | 传入到dlalog中的数据,可以在message titleSlot footerSlot回调函数中通过注入的参数获取到,如形参叫做dialog,那么可以通过dialog.data获取到 | object | —— | —— |
| message | 写入dialog内容的回调,可以注入dialog实例,返回要渲染的jsx | function | —— | —— |
| titleSlot | 写入dialogtitle的回调,相当于el-dialog中的slot="title",可以注入dialog实例,返回要渲染的jsx | function | —— | —— |
| footerSlot | 写入dialogfooter的回调,相当于el-dialog中的slot="footer",可以注入dialog实例,返回要渲染的jsx | function | —— | —— |
| open | el-dialog中的open事件 | function | —— | —— |
| opened | el-dialog中的opened事件 | function | —— | —— |
| close | el-dialog中的close事件 | function | —— | —— |
| closed | el-dialog中的closed事件 | function | —— | —— |
| title | 请参照elementui官方文档 | | | |
| width | 请参照elementui官方文档 | | | |
| fullscreen | 请参照elementui官方文档 | | | |
| top | 请参照elementui官方文档 | | | |
| modal | 请参照elementui官方文档 | | | |
| modal-append-to-body | 请参照elementui官方文档 | | | |
| append-to-body | 请参照elementui官方文档 | | | |
| lock-scroll | 请参照elementui官方文档 | | | |
| custom-class | 请参照elementui官方文档 | | | |
| close-on-click-modal | 请参照elementui官方文档 | | | |
| close-on-press-escape | 请参照elementui官方文档 | | | |
| show-close | 请参照elementui官方文档 | | | |
| before-close | 请参照elementui官方文档 | | | |
| center | 请参照elementui官方文档 | | | |
visible属性不支持传入,因调用$dialog直接就展示弹窗destroy-on-close属性不支持传入,每次关闭弹窗,都会自动销毁实例