FXUI

# FxDialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

# 基本用法

Dialog 弹出一个对话框，适合需要定制性更大的场景。
所有弹框层级是统一维护的，可以通过 FxUI.Utils.getPopupZIndex()获取最新 zIndex 值。

dialog default dialog witdh:30% dialog fullscreen
当前的zIndex:2000
这是一段信息0
这是一段信息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
取 消 确 定 下拉菜单 黄金糕 狮子头 螺蛳粉 双皮奶 蚵仔煎 这是一段信息2-0
这是一段信息2-1
这是一段信息2-2
这是一段信息2-3
这是一段信息2-4
这是一段信息2-5
这是一段信息2-6
这是一段信息2-7
这是一段信息2-8
这是一段信息2-9
这是一段信息2-10
这是一段信息2-11
这是一段信息2-12
这是一段信息2-13
这是一段信息2-14
这是一段信息2-15
这是一段信息2-16
这是一段信息2-17
这是一段信息2-18
这是一段信息2-19
这是一段信息2-20
这是一段信息2-21
这是一段信息2-22
这是一段信息2-23
这是一段信息2-24
这是一段信息2-25
这是一段信息2-26
这是一段信息2-27
这是一段信息2-28
这是一段信息2-29
这是一段信息2-30
这是一段信息2-31
这是一段信息2-32
这是一段信息2-33
这是一段信息2-34
这是一段信息2-35
这是一段信息2-36
这是一段信息2-37
这是一段信息2-38
这是一段信息2-39
这是一段信息2-40
这是一段信息2-41
这是一段信息2-42
这是一段信息2-43
这是一段信息2-44
这是一段信息2-45
这是一段信息2-46
这是一段信息2-47
这是一段信息2-48
这是一段信息2-49
这是一段信息2-50
这是一段信息2-51
这是一段信息2-52
这是一段信息2-53
这是一段信息2-54
这是一段信息2-55
这是一段信息2-56
这是一段信息2-57
这是一段信息2-58
这是一段信息2-59
这是一段信息2-60
这是一段信息2-61
这是一段信息2-62
这是一段信息2-63
这是一段信息2-64
这是一段信息2-65
这是一段信息2-66
这是一段信息2-67
这是一段信息2-68
这是一段信息2-69
这是一段信息2-70
这是一段信息2-71
这是一段信息2-72
这是一段信息2-73
这是一段信息2-74
这是一段信息2-75
这是一段信息2-76
这是一段信息2-77
这是一段信息2-78
这是一段信息2-79
这是一段信息2-80
这是一段信息2-81
这是一段信息2-82
这是一段信息2-83
这是一段信息2-84
这是一段信息2-85
这是一段信息2-86
这是一段信息2-87
这是一段信息2-88
这是一段信息2-89
这是一段信息2-90
这是一段信息2-91
这是一段信息2-92
这是一段信息2-93
这是一段信息2-94
这是一段信息2-95
这是一段信息2-96
这是一段信息2-97
这是一段信息2-98
这是一段信息2-99
取 消 确 定 这是一段信息3
取 消 确 定 这是一段信息4-0
这是一段信息4-1
这是一段信息4-2
这是一段信息4-3
这是一段信息4-4
这是一段信息4-5
这是一段信息4-6
这是一段信息4-7
这是一段信息4-8
这是一段信息4-9
这是一段信息4-10
这是一段信息4-11
这是一段信息4-12
这是一段信息4-13
这是一段信息4-14
这是一段信息4-15
这是一段信息4-16
这是一段信息4-17
这是一段信息4-18
这是一段信息4-19
这是一段信息4-20
这是一段信息4-21
这是一段信息4-22
这是一段信息4-23
这是一段信息4-24
这是一段信息4-25
这是一段信息4-26
这是一段信息4-27
这是一段信息4-28
这是一段信息4-29
这是一段信息4-30
这是一段信息4-31
这是一段信息4-32
这是一段信息4-33
这是一段信息4-34
这是一段信息4-35
这是一段信息4-36
这是一段信息4-37
这是一段信息4-38
这是一段信息4-39
这是一段信息4-40
这是一段信息4-41
这是一段信息4-42
这是一段信息4-43
这是一段信息4-44
这是一段信息4-45
这是一段信息4-46
这是一段信息4-47
这是一段信息4-48
这是一段信息4-49
这是一段信息4-50
这是一段信息4-51
这是一段信息4-52
这是一段信息4-53
这是一段信息4-54
这是一段信息4-55
这是一段信息4-56
这是一段信息4-57
这是一段信息4-58
这是一段信息4-59
这是一段信息4-60
这是一段信息4-61
这是一段信息4-62
这是一段信息4-63
这是一段信息4-64
这是一段信息4-65
这是一段信息4-66
这是一段信息4-67
这是一段信息4-68
这是一段信息4-69
这是一段信息4-70
这是一段信息4-71
这是一段信息4-72
这是一段信息4-73
这是一段信息4-74
这是一段信息4-75
这是一段信息4-76
这是一段信息4-77
这是一段信息4-78
这是一段信息4-79
这是一段信息4-80
这是一段信息4-81
这是一段信息4-82
这是一段信息4-83
这是一段信息4-84
这是一段信息4-85
这是一段信息4-86
这是一段信息4-87
这是一段信息4-88
这是一段信息4-89
这是一段信息4-90
这是一段信息4-91
这是一段信息4-92
这是一段信息4-93
这是一段信息4-94
这是一段信息4-95
这是一段信息4-96
这是一段信息4-97
这是一段信息4-98
这是一段信息4-99
取 消 确 定 这是一段信息5
这是一段信息5
这是一段信息5
这是一段信息5
取 消 确 定

需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

<fx-button type="primary" @click="handlerClick" ref="btn1"
  >dialog default</fx-button
>
<!-- <fx-button type="primary" @click="dialogVisible1_2=true">dialog small</fx-button> -->
<!-- <fx-button type="primary" @click="dialogVisible1_3=true">dialog medium</fx-button> -->
<fx-button type="primary" @click="dialogVisible1_4=true"
  >dialog witdh:30%</fx-button
>
<fx-button type="primary" @click="dialogVisible1_5=true"
  >dialog fullscreen</fx-button
>
<div>当前的zIndex:{{popupZIndex}}</div>

<fx-dialog
  :visible.sync="dialogVisible"
  ref="dialog1"
  :append-to-body="true"
  title="提示1"
  z-index="3000"
  max-height="200px"
  @open="open"
  @opened="opened"
  @close="close"
  @closed="closed"
>
  <template v-for="item in arr">
    <span>这是一段信息{{item}}</span> <br />
  </template>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible = false">取 消</fx-button>
    <fx-button type="primary" @click="arr.length=20">确 定</fx-button>
  </span>
  <fx-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <fx-dropdown-menu slot="dropdown" z-index="1000">
      <fx-dropdown-item>黄金糕</fx-dropdown-item>
      <fx-dropdown-item>狮子头</fx-dropdown-item>
      <fx-dropdown-item>螺蛳粉</fx-dropdown-item>
      <fx-dropdown-item disabled>双皮奶</fx-dropdown-item>
      <fx-dropdown-item divided>蚵仔煎</fx-dropdown-item>
    </fx-dropdown-menu>
  </fx-dropdown>
</fx-dialog>

<fx-dialog
  :visible.sync="dialogVisible1_2"
  ref="dialog1_2"
  size="small"
  :append-to-body="true"
  title="提示"
  max-height="300px"
  :before-close="handleClose"
  @opened="opened"
>
  <template v-for="item in arr">
    <span>这是一段信息2-{{item}}</span> <br />
  </template>

  <span slot="footer" class="dialog-footer">
    <fx-button size="small" @click="dialogVisible1_2 = false">取 消</fx-button>
    <fx-button size="small" type="primary" @click="dialogVisible1_2 = false"
      >确 定</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_3"
  ref="dialog1_3"
  size="medium"
  :append-to-body="true"
  title="提示"
  @opened="opened"
>
  <span>这是一段信息3</span> <br />
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_3 = false">取 消</fx-button>
    <fx-button type="primary" @click="dialogVisible1_3 = false"
      >确 定</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_4"
  ref="dialog1_4"
  width="30%"
  :append-to-body="true"
  title="提示"
  @opened="opened"
>
  <template v-for="item in arr">
    <span>这是一段信息4-{{item}}</span> <br />
  </template>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_4 = false">取 消</fx-button>
    <fx-button type="primary" @click="dialogVisible1_4 = false"
      >确 定</fx-button
    >
  </span>
</fx-dialog>
<fx-dialog
  :visible.sync="dialogVisible1_5"
  ref="dialog1_5"
  fullscreen
  size="small"
  :append-to-body="true"
  title="提示"
  @opened="opened"
>
  <span>这是一段信息5</span> <br />
  <span>这是一段信息5</span> <br />
  <span>这是一段信息5</span> <br />
  <span>这是一段信息5</span> <br />
  <span slot="footer" class="dialog-footer">
    <fx-button @click="dialogVisible1_5 = false">取 消</fx-button>
    <fx-button type="primary" @click="dialogVisible1_5 = false"
      >确 定</fx-button
    >
  </span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        popupZIndex: 2000,
        arr: [],
        dialogVisible: false,
        dialogVisible1_2: false,
        dialogVisible1_3: false,
        dialogVisible1_4: false,
        dialogVisible1_5: false
      };
    },
    watch: {
      dialogVisible1_4(val) {
        setTimeout(() => {
          this.arr = [];
          for (let i = 0; i < 20; i++) {
            this.arr.push(i);
          }
          this.$refs.dialog1_4.caculatePosition();

          setTimeout(() => {
            for (let i = 0; i < 20; i++) {
              this.arr.push(i);
            }
            this.$refs.dialog1_4.caculatePosition();
          }, 2000);
        }, 2000);
      }
    },
    methods: {
      handlerClick() {
        this.dialogVisible = true;

        // FxUI.Utils.updatePopupZIndex(3000);
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      open() {
        console.log("open....");
      },
      opened() {
        console.log("opened....");
        // this.popupZIndex = this.$FxUI.Utils.getPopupZIndex();
      },
      close() {
        console.log("close....");
      },
      closed() {
        console.log("closed....");
      }
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.arr.push(i);
      }
    }
  };
</script>
显示代码 复制代码

TIP

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果您在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

# 侧滑框

点击打开 Dialog1 点击打开 Dialog2 这是一段信息 点击打开 Dialog 处理中心 选项1 选项2 选项3 选项1 选项2 选项3 消息中心 这是一段信息 点击打开 Dialog 这是一段信息 点击打开 Dialog 这是一段信息 这是一段信息
<fx-button type="text" @click="dialogVisible1 = true"
  >点击打开 Dialog1</fx-button
>
<fx-button type="text" @click="dialogVisible2 = true"
  >点击打开 Dialog2</fx-button
>

<fx-dialog
  ref="dialog1"
  title="提示"
  :visible.sync="dialogVisible1"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
  @open="open"
  @opened="opened"
  @closed="closed"
>
  <span>这是一段信息</span>
  <fx-button type="text" @click="dialogVisible1_1=true"
    >点击打开 Dialog</fx-button
  >
  <fx-menu default-active="1" class="el-menu-demo" mode="horizontal">
    <fx-menu-item index="1">处理中心</fx-menu-item>
    <fx-submenu index="2">
      <template slot="title">我的工作台</template>
      <fx-menu-item index="2-1">选项1</fx-menu-item>
      <fx-menu-item index="2-2">选项2</fx-menu-item>
      <fx-menu-item index="2-3">选项3</fx-menu-item>
      <fx-submenu index="2-4">
        <template slot="title">选项4</template>
        <fx-menu-item index="2-4-1">选项1</fx-menu-item>
        <fx-menu-item index="2-4-2">选项2</fx-menu-item>
        <fx-menu-item index="2-4-3">选项3</fx-menu-item>
      </fx-submenu>
    </fx-submenu>
    <fx-menu-item index="3" disabled>消息中心</fx-menu-item>
  </fx-menu>
</fx-dialog>
<fx-dialog
  ref="dialog1"
  title="提示"
  :visible.sync="dialogVisible1_1"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
>
  <span>这是一段信息</span>
  <fx-button type="text" @click="dialogVisible1_2=true"
    >点击打开 Dialog</fx-button
  >
</fx-dialog>
<fx-dialog
  ref="dialog1"
  title="提示"
  :visible.sync="dialogVisible1_2"
  width="50%"
  :append-to-body="true"
  :slider-panel="true"
  :modal="false"
>
  <span>这是一段信息</span>
  <fx-button type="text" @click="onClick">点击打开 Dialog</fx-button>
</fx-dialog>
<fx-dialog
  title="提示2"
  :visible.sync="dialogVisible2"
  width="30%"
  :append-to-body="true"
  :slider-panel="true"
>
  <span>这是一段信息</span>
</fx-dialog>

<fx-dialog
  :visible.sync="dialogVisible3"
  :append-to-body="true"
  title="提示1"
  max-height="200px"
>
  <span>这是一段信息</span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible1: false,
        dialogVisible1_1: false,
        dialogVisible1_2: false,
        dialogVisible2: false,
        dialogVisible3: false,
        styleObj: {
          top: "30px"
        }
      };
    },
    methods: {
      onClick() {
        this.dialogVisible3 = true;
        // let index = this.$FxUI.Utils.getPopupZIndex();
        // console.log(21222,this.$refs.dialog1,index)
      },
      open() {
        console.log("open....");
      },
      opened() {
        console.log("opened....");
      },
      close() {
        console.log("close....");
      },
      closed() {
        console.log("closed....");
      }
    },
    created() {}
  };
</script>
显示代码 复制代码

# 自定义内容

Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。

打开嵌套表格的 Dialog 打开嵌套表单的 Dialog
取 消 确 定
<!-- Table -->
<fx-button type="text" @click="dialogTableVisible = true"
  >打开嵌套表格的 Dialog</fx-button
>

<fx-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <fx-table :data="gridData">
    <fx-table-column property="date" label="日期" width="150"></fx-table-column>
    <fx-table-column property="name" label="姓名" width="200"></fx-table-column>
    <fx-table-column property="address" label="地址"></fx-table-column>
  </fx-table>
</fx-dialog>

<!-- Form -->
<fx-button type="text" @click="dialogFormVisible = true"
  >打开嵌套表单的 Dialog</fx-button
>

<fx-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <fx-form :model="form">
    <fx-form-item label="活动名称" :labfx-width="formLabelWidth">
      <fx-input v-model="form.name" autocomplete="off"></fx-input>
    </fx-form-item>
  </fx-form>
  <div slot="footer" class="dialog-footer">
    <fx-button @click="dialogFormVisible = false">取 消</fx-button>
    <fx-button type="primary" @click="dialogFormVisible = false"
      >确 定</fx-button
    >
  </div>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        gridData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          }
        ],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: "",
          region: "",
          date1: "",
          date2: "",
          delivery: false,
          type: [],
          resource: "",
          desc: ""
        },
        formLabelWidth: "120px"
      };
    }
  };
</script>
显示代码 复制代码

# 嵌套的 Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

点击打开外层 Dialog
取 消 打开内层 Dialog

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

<template>
  <fx-button type="text" @click="outerVisible = true"
    >点击打开外层 Dialog</fx-button
  >

  <fx-dialog title="外层 Dialog" :visible.sync="outerVisible">
    <fx-dialog
      width="30%"
      title="内层 Dialog"
      :visible.sync="innerVisible"
      append-to-body
    >
    </fx-dialog>
    <div slot="footer" class="dialog-footer">
      <fx-button @click="outerVisible = false">取 消</fx-button>
      <fx-button type="primary" @click="innerVisible = true"
        >打开内层 Dialog</fx-button
      >
    </div>
  </fx-dialog>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false
      };
    }
  };
</script>
显示代码 复制代码

# 居中布局

标题和底部可水平居中

点击打开 Dialog 需要注意的是内容是默认不居中的 取 消 确 定

将center设置为true即可使标题和底部居中。center仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。

<fx-button type="text" @click="centerDialogVisible = true"
  >点击打开 Dialog</fx-button
>

<fx-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
  <span>需要注意的是内容是默认不居中的</span>
  <span slot="footer" class="dialog-footer">
    <fx-button @click="centerDialogVisible = false">取 消</fx-button>
    <fx-button type="primary" @click="centerDialogVisible = false"
      >确 定</fx-button
    >
  </span>
</fx-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>
显示代码 复制代码

TIP

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

TIP

如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

# Attributes

参数 说明 类型 可选值 默认值 PC/移动端支持情况
visible/v-model 是否显示 Dialog，支持 .sync 修饰符 boolean — false PC端仅支持visible/移动端仅支持v-model
title Dialog 的标题，也可通过具名 slot （见下表）传入 string — — 仅PC
width Dialog 的宽度 string — 50% 仅PC
max-height Dialog 的 body 部分的最高宽度，如“200px” string — - 仅PC
fullscreen 是否为全屏 Dialog boolean — false 仅PC
modal 是否需要遮罩层 boolean — true PC/移动端
modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean — true 仅PC
append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false 仅PC
lock-scroll 是否在 Dialog 出现时将 body 滚动锁定 boolean — true 仅PC
custom-class Dialog 的自定义类名 string — — PC/移动端
close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog boolean — true 仅PC
show-close 是否显示关闭按钮，前提是 title 不为空或有等于 header 的插槽 boolean — true 仅PC
before-close 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog — — PC/移动端
center 是否对头部和底部采用居中布局 boolean — false 仅PC
autoClose 是否自动关闭 boolean — - 仅PC
duration 自动关闭的延迟时间，单位：ms number — 3000 仅PC
sliderPanel 是否是侧滑窗口，默认宽度为屏幕 50% boolean — false 仅PC
close-on-click-outside sliderPanel 为 true 时，是否可以通过点击 Dialog 之外的区域关闭 dialog boolean — true PC/移动端
transition 动画模式 String fade/ slide/ scale/ shrink fade 仅移动端
remove-modal 是否移除蒙层DOM Boolean - false 仅移动端
close-when-popstate 监听popstate事件，当路由切换时关闭popup及modal Boolean - true 仅移动端

# Slot

name 说明 PC/移动端支持情况
— Dialog 的内容 PC/移动端
title Dialog 标题区的内容 仅PC
footer Dialog 按钮操作区的内容 仅PC

# Methods

方法名 说明 参数 PC/移动端支持情况
caculatePosition 重新计算 dialog 位置。当内容有变化时，可用。 — 仅PC

# Events

事件名称 说明 回调参数 PC/移动端支持情况
open Dialog 打开的回调 — 仅PC
opened Dialog 打开动画结束时的回调 — 仅PC
close Dialog 关闭的回调 — 仅PC
closed Dialog 关闭动画结束时的回调 — PC/移动端
update:visible visible 更新时的回调 — 仅PC
click-modal 点击蒙层时触发 — 仅移动端
lastUpdate: 5/3/2023, 11:40:26 PM

← 卡片 →