Dialog 弹出框

Dialog 组件支持函数调用和组件调用两种形式

使用指南

import { Dialog } from 'vant';
Vue.use(Dialog);

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮

Dialog.alert({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on close
});
Dialog.alert({
  message: '弹窗内容'
}).then(() => {
  // on close
});

消息确认

用于确认消息，包含取消和确认按钮

Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on confirm
}).catch(() => {
  // on cancel
});

全局方法

引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 $dialog 方法，在所有组件内部都可以直接调用此方法

export default {
  mounted() {
    this.$dialog.alert({
      message: '弹窗内容'
    });
  }
}

方法

Options

高级用法

如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog，调用前需要通过 Vue.use 注册组件

<van-dialog
  v-model="show"
  show-cancel-button
  :before-close="beforeClose"
>
  <van-field
    v-model="username"
    label="用户名"
    placeholder="请输入用户名"
  />
  <van-field
    v-model="password"
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
</van-dialog>

export default {
  data() {
    return {
      show: false,
      username: '',
      password: ''
    };
  },
  methods: {
    beforeClose(action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000);
      } else {
        done();
      }
    }
  }
}

API

Event

原文: https://youzan.github.io/vant/#/zh-CN/dialog