Vant weapp 是微信小程序开发中常用的UI组件库,它提供漂亮的外观,使用起来也非常简单,方便。 最近,有学员问到,使用其对话框控件时如何改变的对话框的背景色,本文就是用来记录解决方案的。

基础代码

首先在页面(index)上加入一个按钮,当点击时,弹出对话框。相应的代码如下:

index.json - 引入对话框控件

1
2
3
4
5
{
"usingComponents": {
"van-dialog": "../../vant/dialog/index"
}
}

index.wxml

1
2
3
4
5
<van-dialog id="van-dialog" />

<view>
<van-button type="primary" size="large" bindtap='onOpenDialog'>打开弹出框</van-button>
</view>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Dialog from '../../vant/dialog/dialog';

const app = getApp()

Page({
data: {
},
onOpenDialog: function() {
Dialog.alert({
title: '标题',
message: '弹窗内容'
}).then(() => {
console.log('dialog closed.')
});
},
onLoad: function () {
},
getUserInfo: function(e) {
}
})

以上代码弹出的对话框为默认的白底黑字的对话框。效果如图:

改变背景色

在 vant weapp 的很多控件中,都提供了一个 customStyle 的属性,用这个属性,可以提供自定义的 css 修饰,从而改变显示风格。

要改变对话框(Dialog)的背景色,只需要使用 customStyle 属性,按照 css 语法设置需要的颜色值即可。

下面是示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Dialog from '../../vant/dialog/dialog';

const app = getApp()

Page({
data: {
},
onOpenDialog: function() {
Dialog.alert({
title: '标题',
message: '弹窗内容',
customStyle: 'background-color:#112233'
}).then(() => {
console.log('dialog closed.')
});
},
onLoad: function () {
},
getUserInfo: function(e) {
}
})

只需要修改 javascript 即可。在第12行中指定了背景色为: #112233。

效果如图: