vant/docs/examples-docs/dialog.md

<style> @component-namespace demo { @b dialog { .zan-button { margin: 15px; } } } </style> <script> import { Dialog } from 'src/index'; import MobileComputed from 'components/mobile-computed'; export default { mixins: [MobileComputed], computed: { mobileUrl() { return '/examples.html' + location.hash; } }, methods: { handleAlertClick() { Dialog.alert({ title: 'alert标题', message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' }).then((action) => { console.log(action); }); }, handleConfirmClick() { Dialog.confirm({ title: 'confirm标题', message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。' }).then((action) => { console.log(action); }, (error) => { console.log(error); }); } } }; </script>

Dialog组件

基础用法

:::demo 基础用法

<zan-button @click="handleAlertClick">alert</zan-button>

<zan-button @click="handleConfirmClick">confirm</zan-button>

<script>
import { Dialog } from 'src/index';

export default {
  methods: {
    handleAlertClick() {
      Dialog.alert({
        title: 'alert标题',
        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
      }).then((action) => {
        console.log(action);
      });
    },

    handleConfirmClick() {
      Dialog.confirm({
        title: 'confirm标题',
        message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
      }).then((action) => {
        console.log(action);
      }, (error) => {
        console.log(error);
      });
    }
  }
};
</script>

:::

点击以下按钮查看手机端效果：

<zan-button @click="mobileShow = true">点击查看手机端效果

API

参数	说明	类型	默认值	可选值
title	标题	String	''
message	内容	String	''