一、使用

官网中给出了两种，用法

1. 函数调用

import { Dialog } from 'vant';

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

     2.组件调用

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

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

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

二、示例 (函数调用)

        1.HTML中

  <!-- html中，绑定一个事件，例如@click="clear" -->     
  <van-button
    native-type="button"
    @click="clear"
    type="default"
    style="width: 80px; height: 40px"
    size="normal"
    class="btn_left"
   >Clear</van-button>

        2.methods方法中 

methods:{

    clear() {
      Dialog.confirm({
        //  文本内容，支持通过\n换行
        message: "Confirm to clear all information?",
        //  确认按钮文案
        confirmButtonText: "Yes",
        //	取消按钮文案
        cancelButtonText: "No",
        //  确认按钮颜色
        confirmButtonColor: "#07c160",
        //  自定义类名
        className: "van-dialog__message",
      })
        .then(() => {
          // on confirm
          
          setTimeout(() => {
            Toast("Cleared successfully!");
          }, 1000);
        })
        .catch(() => {
          // on cancel
        });
    },

}

        3.关于className的使用

        因为在我这个项目中，Dialog的弹窗Message默认字号大小为14px；太小不符合我们客户的需求！

        同时组件的样式权重也是最高的

 

 那我们现在来修改他的字号样式，利用Dialog回传的className，也就是上面写的：van-dialog__message

 具体步骤：

        1.  f12，选择Elements 找出对应的样式类名；

        2.  自己想要修改的属性，然后你就会发现组件原本的属性会被我们回传过去的覆盖掉

        Tips： 修改的样式后面一定要加上  !important  来增加样式的权重，不然无法覆盖

.van-dialog__message {
  font-size: 17px !important;
  padding: 0 !important;
}