el-global-dialog

# 介绍

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

# 安装

npm install --save el-global-dialog
1

# 使用方法


 

// 引入
import 'el-global-dialog'
1
2
当前页面作用域的数据 abc 
<template>
  <div>
    当前页面作用域的数据
    <span>{{ formData.name }}</span>
    <el-button @click="openDialog">打开dialog</el-button>
  </div>
</template>

<script>
export default {
  name: 'dialog-Demo',
  data() {
    return {
      formData: {
        name: 'abc',
      },
    };
  },
  mounted() {},
  methods: {
    openDialog() {
      this.$dialog({
        data: this.formData,
        title: '标题',
        width: '30%',
        center: true,
        beforeClose(done) {
          this.$confirm('确认关闭？')
            .then(() => {
              done();
            })
            .catch(() => {});
        },
        open() {
          console.log('open');
        },
        opened() {
          console.log('opened');
        },
        close() {
          console.log('close');
        },
        closed() {
          console.log('closed');
        },
        message: (dialog) => {
          return (
            <el-form>
              <el-form-item label="当前页面的数据,所以改变的时候会跟页面上面的数据同步,关闭重新打开后,依然是改变后的数据">
                <el-input vModel={this.formData.name} />
              </el-form-item>
              <el-form-item label="dialog的数据,所以改变的时候不会同步到页面上,只会改变dialog中的该数据,关闭重新打开后,数据就初始化了">
                <el-input vModel={dialog.data.name} />
                {dialog.data.name}
              </el-form-item>
            </el-form>
          );
        },
        titleSlot(dialog) {
          return <div>title2333{dialog.title}</div>;
        },
        footerSlot(dialog) {
          return (
            <span class="dialog-footer">
              <el-button
                v-on:click={() => {
                  dialog.visible = false;
                }}
              >
                取 消
              </el-button>
              <el-button
                type="primary"
                v-on:click={() => {
                  dialog.visible = false;
                }}
              >
                确 定
              </el-button>
            </span>
          );
        },
      });
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Expand Copy

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