vant中Dialog的使用，如何修改Message字号大小

一、使用

官网中给出了两种，用法

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({
        //  文本内容，支持通过
换行
        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;
}