一、使用
官网中给出了两种，用法
- 函数调用
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; }
