liyongleihf2006 / el-global-dialog

可以全局使用element的dialog

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