Vant Dialog pop-up box

Introduced

Pop-up modal boxes, often used for message prompts, message confirmations, and specific interactions within the current page

Pop-up components support both function calls and component calls

The function is called

Dialog is a function, not a component, so you can call it directly to show the corresponding prompt window

import { Dialog } from 'vant';

Dialog({ message: '提示' });

The component is called

When dialog is called through a component, you can register it in the following way

import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);

// 局部注册
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
}

Code demo

Message prompt

Used to prompt for messages that contain only one confirmation button

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

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

Message confirmation

Used to confirm messages, including cancellation and confirmation buttons

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

Asynchronous shutdown

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose
});

The global method

When the Dialog component is introduced, the method is automatically mounted on Vue's prototype$dialog method, which can be called directly within all components

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

The component is called

If you need to embed components or other custom content in the bounce window, you can use the way the components are called

<van-dialog v-model="show" title="标题" show-cancel-button>
  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow" >
</van-dialog>

export default {
  data() {
    return {
      show: false
    };
  }
}

Api

Method

Options

When dialog is called through a function, the following options are supported:

Props

When Dialog is called from a component, the following Props are supported:

Events

When Dialog is called through a component, the following events are supported:

Slots

When Dialog is called from a component, the following slots are supported: