Vant weapp 是微信小程序开发中常用的UI组件库,它提供漂亮的外观,使用起来也非常简单,方便。 最近,有学员问到,使用其对话框控件时如何改变的对话框的背景色,本文就是用来记录解决方案的。
基础代码
首先在页面(index)上加入一个按钮,当点击时,弹出对话框。相应的代码如下:
index.json - 引入对话框控件
1 | { |
index.wxml
1 | <van-dialog id="van-dialog" /> |
index.js
1 | import Dialog from '../../vant/dialog/dialog'; |
以上代码弹出的对话框为默认的白底黑字的对话框。效果如图:
改变背景色
在 vant weapp 的很多控件中,都提供了一个 customStyle 的属性,用这个属性,可以提供自定义的 css 修饰,从而改变显示风格。
要改变对话框(Dialog)的背景色,只需要使用 customStyle 属性,按照 css 语法设置需要的颜色值即可。
下面是示例代码:
1 | import Dialog from '../../vant/dialog/dialog'; |
只需要修改 javascript 即可。在第12行中指定了背景色为: #112233。
效果如图: