Modal 对话框

模态对话框。

何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

代码演示

异步关闭

点击确定后异步关闭对话框，例如提交表单。

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
    <a-modal
      title="Title"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <p>{{ModalText}}</p>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 2000);
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
    },
  };
</script>

基本

第一个对话框。

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <a-modal title="Basic Modal" v-model="visible" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log(e);
        this.visible = false;
      },
    },
  };
</script>

确认对话框(promise)

使用 confirm() 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭

<template>
  <a-button @click="showConfirm">
    Confirm
  </a-button>
</template>
<script>
  export default {
    methods: {
      showConfirm() {
        this.$confirm({
          title: 'Do you want to delete these items?',
          content: 'When clicked the OK button, this dialog will be closed after 1 second',
          onOk() {
            return new Promise((resolve, reject) => {
              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
            }).catch(() => console.log('Oops errors!'));
          },
          onCancel() {},
        });
      },
    },
  };
</script>

确认对话框

使用 confirm() 可以快捷地弹出确认框。

<template>
  <div>
    <a-button @click="showConfirm">
      Confirm
    </a-button>
    <a-button @click="showDeleteConfirm" type="dashed">
      Delete
    </a-button>
    <a-button @click="showPropsConfirm" type="dashed">
      With extra props
    </a-button>
  </div>
</template>
<script>
  export default {
    methods: {
      showConfirm() {
        this.$confirm({
          title: 'Do you Want to delete these items?',
          content: h => <div style="color:red;">Some descriptions</div>,
          onOk() {
            console.log('OK');
          },
          onCancel() {
            console.log('Cancel');
          },
          class: 'test',
        });
      },
      showDeleteConfirm() {
        this.$confirm({
          title: 'Are you sure delete this task?',
          content: 'Some descriptions',
          okText: 'Yes',
          okType: 'danger',
          cancelText: 'No',
          onOk() {
            console.log('OK');
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      },
      showPropsConfirm() {
        this.$confirm({
          title: 'Are you sure delete this task?',
          content: 'Some descriptions',
          okText: 'Yes',
          okType: 'danger',
          okButtonProps: {
            props: { disabled: true },
          },
          cancelText: 'No',
          onOk() {
            console.log('OK');
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      },
    },
  };
</script>

自定义页脚

更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。不需要默认确定取消按钮时，你可以把 footer 设为 null。

<template>
  <div>
    <a-button type="primary" @click="showModal">
      Open Modal with customized footer
    </a-button>
    <a-modal v-model="visible" title="Title" onOk="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">Return</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          Submit
        </a-button>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        visible: false,
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        this.loading = true;
        setTimeout(() => {
          this.visible = false;
          this.loading = false;
        }, 3000);
      },
      handleCancel(e) {
        this.visible = false;
      },
    },
  };
</script>

信息提示

各种类型的信息提示，只提供一个按钮用于关闭。

<template>
  <div>
    <a-button @click="info">Info</a-button>
    <a-button @click="success">Success</a-button>
    <a-button @click="error">Error</a-button>
    <a-button @click="warning">Warning</a-button>
  </div>
</template>
<script>
  import { Modal } from 'ant-design-vue';
  export default {
    methods: {
      info() {
        const h = this.$createElement;
        this.$info({
          title: 'This is a notification message',
          content: h('div', {}, [
            h('p', 'some messages...some messages...'),
            h('p', 'some messages...some messages...'),
          ]),
          onOk() {},
        });
      },
      success() {
        this.$success({
          title: 'This is a success message',
          // JSX support
          content: (
            <div>
              <p>some messages...some messages...</p>
              <p>some messages...some messages...</p>
            </div>
          ),
        });
      },
      error() {
        this.$error({
          title: 'This is an error message',
          content: 'some messages...some messages...',
        });
      },
      warning() {
        this.$warning({
          title: 'This is a warning message',
          content: 'some messages...some messages...',
        });
      },
    },
  };
</script>

国际化

设置 okText 与 cancelText 以自定义按钮文字。

<template>
  <div>
    <a-button type="primary" @click="showModal">Modal</a-button>
    <a-modal title="Modal" v-model="visible" @ok="hideModal" okText="确认" cancelText="取消">
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
    </a-modal>
    <br />
    <br />
    <a-button @click="confirm">Confirm</a-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      hideModal() {
        this.visible = false;
      },
      confirm() {
        this.$confirm({
          title: 'Confirm',
          content: 'Bla bla ...',
          okText: '确认',
          cancelText: '取消',
        });
      },
    },
  };
</script>

手动更新和移除

手动更新和关闭 Modal.method 方式创建的对话框。

<template>
  <a-button @click="countDown">Open modal to close in 5s</a-button>
</template>
<script>
  export default {
    methods: {
      countDown() {
        let secondsToGo = 5;
        const modal = this.$success({
          title: 'This is a notification message',
          content: `This modal will be destroyed after ${secondsToGo} second.`,
        });
        const interval = setInterval(() => {
          secondsToGo -= 1;
          modal.update({
            content: `This modal will be destroyed after ${secondsToGo} second.`,
          });
        }, 1000);
        setTimeout(() => {
          clearInterval(interval);
          modal.destroy();
        }, secondsToGo * 1000);
      },
    },
  };
</script>

自定义位置

使用 centered 或类似 style.top 的样式来设置对话框位置。

<template>
  <div id="components-modal-demo-position">
    <a-button type="primary" @click="() => setModal1Visible(true)"
      >Display a modal dialog at 20px to Top</a-button
    >
    <a-modal
      title="20px to Top"
      style="top: 20px;"
      :visible="modal1Visible"
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>
    <br /><br />
    <a-button type="primary" @click="() => modal2Visible = true"
      >Vertically centered modal dialog</a-button
    >
    <a-modal
      title="Vertically centered modal dialog"
      centered
      v-model="modal2Visible"
      @ok="() => modal2Visible = false"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        modal1Visible: false,
        modal2Visible: false,
      };
    },
    methods: {
      setModal1Visible(modal1Visible) {
        this.modal1Visible = modal1Visible;
      },
    },
  };
</script>

自定义页脚按钮属性

传入 okButtonProps 和 cancelButtonProps 可分别自定义确定按钮和取消按钮的 props。

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal with customized button props</a-button>
    <a-modal
      title="Basic Modal"
      v-model="visible"
      @ok="handleOk"
      :okButtonProps="{ props: {disabled: true} }"
      :cancelButtonProps="{ props: {disabled: true} }"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log(e);
        this.visible = false;
      },
      handleCancel(e) {
        console.log(e);
        this.visible = false;
      },
    },
  };
</script>

销毁确认对话框

使用 Modal.destroyAll() 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。

<template>
  <a-button @click="showConfirm">
    Confirm
  </a-button>
</template>
<script>
  import Button from '../../button';
  export default {
    methods: {
      showConfirm() {
        const self = this;
        for (let i = 0; i < 3; i += 1) {
          setTimeout(() => {
            this.$confirm({
              content: 'destroy all',
              onOk() {
                return new Promise((resolve, reject) => {
                  setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                }).catch(() => console.log('Oops errors!'));
              },
              cancelText: 'Click to destroy all',
              onCancel() {
                self.destroyAll();
              },
            });
          }, i * 500);
        }
      },
      destroyAll() {
        this.$destroyAll();
      },
    },
  };
</script>

API

事件

注意

<Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。

Modal.method()

包括：

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

以上均为一个函数，参数为 object，具体属性如下：

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

const modal = Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();

• Modal.destroyAll

使用 Modal.destroyAll() 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）

const router = new VueRouter({ ... })

// router change
router.beforeEach((to, from, next) => {
  Modal.destroyAll();
})