声明:我的文章很详(luo)细(suo),适合基础特别差的人看。
1.引入
首先,安装Vant Weapp
:
1 | #根目录下打开命令提示符 |
然后,在app.json
中这样引入:
1 | "usingComponents": { |
蛤?找不到app.json
?点击 快速上手,src
根目录下就可以看到app.json
了。
多说几句,"van-checkbox": "/path/vant-weapp/checkbox/index"
后半部分的路径,不同教程可能给的不同,我的项目path
路径下啥都没有,但却可以这样引入,是因为我在webpack.base.conf.js
中配置了:
1 | plugins: [ |
2.使用 van-checkbox
- 新建
index.vue
,直接上代码:
1 | <van-checkbox |
与 Vant Weapp 官网的差别:
1 | // 官网(原生小程序) |
- 然后是逻辑代码,官网给的是小程序代码,无法直接用在 mpvue 中:
1 | Page({ |
改成:
1 | export default { |
运行后打印的是undefined
,说明一下,mpvue 中要把event.detail
改成event.mp.detail
,改过之后就可以正常打印 true 或者 false 了。让后把该值赋给变量 isCheck 就可以被其他地方获取到 van-checkbox 的选中状态了:
1 | methods: { |
另外,有两个常用的属性:
checked-color
和shape
,前者表示选中时的颜色,后者表示 van-checkbox 的形状(默认 round-圆形,可改成 square-正方形)
效果图:
3.使用 van-checkbox-group
- 直接看看 html 部分的代码:
1 | <div> |
这个 van-checkbox-group 包含了两个 van-checkbox,我们想看到每选一个,下面就展示出选择的项目:
- van-checkbox-group 的选中值都放在
:value:result
中,每次勾选或者反选都会触发@change
事件。逻辑代码部分:
1 | export default { |
max
属性可以设置最大可选数,<van-checkbox-group :value="result" @change="onChange" max="2">...</van-checkbox-group>
表示最多可选 2 项。
4.搭配单元格组件使用
首先引入 van-cell 和 van-cell-group:
1 | "usingComponents": { |
然后这样使用:
1 | <van-checkbox-group :value="values" @change="groupclick"> |
说几点需要注意的细节:
- 与 Vant Weapp 官网的差别:
1
2
3
4
5
6 > // 官网(原生小程序)
> title="复选框 {{ item }}"
>
> // mpvue
> :title="'蔡徐坤'+item"
>
<van-checkbox :name="item"/>
是<van-cell></van-cell>
的子元素,这样才可以使用父元素中遍历的item
- 必须添加
:data-name="item"
,否则子元素获取不到该数据- 动态绑定数据,所以这些属性都是
v-bind
类型的::title
,:data-name
,:name
逻辑代码部分:
1 | export default { |
注意一点就行,这样获取 van-checkbox 的name
属性:let val = event.mp.currentTarget.dataset.name
,效果图:
最后,源码地址