Quick 文档 0.2.3

Modal 对话框

说明

展示信息或引导用户操作。

代码示例

>{}
<template>
  <div>
    <Modal
      title="注销提示"
      body="是否需要注销当前用户？"
      :show="the.modal.show"
      @onEvent="ModalEvent"
    >
      <h5>当前组件创建</h5>
    </Modal>

    <Button @click="the.modal.show = true"> 打开当前对话框 </Button>
    <Button @click="btnConfirm"> 打开订阅对话框 </Button>
  </div>
</template>

<script>
export default {
  setup(props, { refs }) {
    // 使用外挂方式引入，具体查看demo
    const $plus = window.$plus;
    const reactive = $plus.vue.reactive;
    const getCurrentInstance = $plus.getCurrentInstance;

    const the = reactive({
      modal: {
        show: false,
      },
    });

    /**
     * 对话框按钮触发事件
     */
    const ModalEvent = (val) => {
      console.log('ModalEvent', val);
      switch (val.cmd) {
        case 'ok':
          //对话框确认
          the.modal.show = !the.modal.show;
          $plus.message.info('点击确认');
          break;
        case 'close':
        case 'cancel':
          // 对话框取消
          the.modal.show = !the.modal.show;
          $plus.message.info('点击取消');
          break;
      }
    };

    // 订阅方式打开全局对话框
    const btnConfirm = () => {
      let _resp = {
        title: '全局订阅事件对话框',
        body: '<p>通过订阅事件调用全局对话框</p><p>Content of dialog</p>',
        // 按钮事件
        onEvent: (val) => {
          console.log('onEvent', val);
          switch (val.cmd) {
            case 'ok':
              //对话框确认
              setTimeout(function () {
                // 关闭对话框
                resp.data.show = false;
                val.close();
              }, 1000);

              break;
            case 'close':
            case 'cancel':
              // 对话框取消
              resp.data.show = false;
              break;
          }
          $plus.message.info('点击：' + val.cmd);
        },
        // 自定义按钮
        btns: [
          {
            cmd: 'cancel',
            text: '不卖了',
          },
          {
            cmd: 'ok',
            type: 'primary',
            /** 是否显示加载图标 */
            loading: true,
            text: '继续购买',
          },
        ],
      };

      switch (val) {
        case 'error':
          _resp.type = 'error';
          break;
        default:
          break;
      }

      // 返回当前对话框对象
      console.log('confirm', _resp);
      let resp = $plus.confirm(_resp);
      console.log('confirm.resp', resp);
    };

    return { the, ModalEvent, btnConfirm };
  },
};
</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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

API

属性说明类型默认值
named 0.4.2组件触发事件名称Stringmodal
title对话框标题String-
body对话框内容，可写 html 标签String-
footerHide隐藏底部按钮 footer-hideBooleanfalse
width对话框宽度Number, String25rem
show显示或隐藏Booleanfalse
closed显示或隐藏关闭按钮Booleanfalse
btns自定义按钮Array-
事件名说明返回值
onEvent按钮点击触发回调事件json

Events cmd ok

参数名说明类型
item返回的整个对象Object
event点击事件Object
close关闭当前对象Function

TIP

通过以下方法来使用

// 全局关闭当前对话框
$plus.confirm({ show: false });

const confirm = () => {
  // 返回当前对话框对象
  $plus.confirm({
    title: '全局订阅事件对话框',
    body: '<p>是否关闭当前窗口？</p>',
    // 按钮事件
    btnEvent: (val) => {
      switch (val.event) {
        case 'ok':
          //对话框确认
          setTimeout(function () {
            // 关闭当前对话框
            $plus.confirm({ show: false });
            // 异步强制关闭指定窗口，不触发onClose 事件
            $plus.frame.close(resp.data.id, true);
          }, 5000);
          break;
        case 'close':
        case 'cancel':
          // 对话框取消
          $plus.confirm({ show: false });
          break;
      }
      $plus.message.info('点击：' + val.event);
      console.log('ModalEvent', val);
    },
  });
};
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
名称说明
footer可自定义按钮等组件

Last Updated: