$dialog

使用this.$dialog的形式使用el-dialog

文档地址

el-global-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属性不支持传入,每次关闭弹窗,都会自动销毁实例