Checkbox复选框的使用频率还是挺高的,Vant提供了多种样式供选择。
准备工作:
- 创建一个页面: Checkbox.vue
- 在router.js里配置 Checkbox页面的路由
Bash
{
path: '/checkbox',
name: 'checkbox',
component: () => import('./views/Checkbox.vue')
}
- 在index.vue里添加一项
Bash
<a href="javascript:void(0)" @click="$router.push('/checkbox')">
<van-col span="6" class="marb20">
<van-icon name="pending-deliver" />
<div>Checkbox 复选框</div>
</van-col>
</a>
至今为止呢,我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了19个组件了!哇噢,为自己欢呼一下吧!如果想看更多的内容,欢迎关注我,每天都有更新哈。
代码演示Checkbox复选框:
基础用法:
Bash
<van-checkbox v-model="checked"></van-checkbox>
data() {
return {
checked: true
}
},
复选框组:
与van-checkbox-group一起使用时,选中的值将会是一个数组,选中的结果将会绑定在van-checkbox-group上;还可以设置最大选中值,用max属性。
Bash
<van-checkbox-group style="margin-left: 40px;text-align: left;"
v-model="result"
:max="2"
>
<van-checkbox
v-for="item in list"
:key="item"
:name="item" //name值是必须要写的,否则一选择就被全选上
>
{{ item }}
</van-checkbox>
</van-checkbox-group>
data() {
return {
list: ['苹果', '香蕉', '梨', '火龙果'],
result: []
}
},
我们可以看下result输出的值。CheckboxGroup上支持change事件。我们在选中时就会触发:
Bash
<van-checkbox-group style="margin-left: 40px;text-align: left;"
v-model="result"
:max="2"
@change="onChange"
>
onChange() {
console.log(this.result)
},
接下来再演示一下搭配单元格组件使用Checkbox。 这种方式是经常用的方式:
Bash
<van-checkbox-group style="margin-left: 40px;text-align: left;"
v-model="result"
:max="2"
@change="onChange"
>
<van-cell-group>
<van-cell
:title="item"
v-for="item in list"
:key="item"
>
<van-checkbox
:name="item"
/>
</van-cell>
</van-cell-group>
</van-checkbox-group>
title显示在cell-group的左侧,checkbox显示在cell-group的右侧。需要说明的一点是v-for循环,一定要跟着key哈,key是不可获缺的。另外,v-for是放在cell里的,因为是整行循环,而不是单独的checkbox循环。
自定义图标:
有的时候我们会有这样一种需求:我们不想用默认的选项图标,这时候我们就需要自定义图标:
Bash
<van-checkbox-group style="margin-left: 40px;text-align: left;"
v-model="result"
:max="2"
@change="onChange"
>
<van-cell-group>
<van-cell
:title="item"
v-for="item in list"
:key="item"
>
<van-checkbox
:name="item"
>
<img
size="20px"
slot="icon"
slot-scope="props"
:src="props.checked ? icon.active : icon.normal"
>
</van-checkbox>
</van-cell>
</van-cell-group>
</van-checkbox-group>
import normal from '../assets/icon.png' //引入图片
import active from '../assets/icon.png' //引入图片
export default {
data() {
return {
list: ['苹果', '香蕉', '梨', '火龙果'],
result: [],
icon: {
normal: normal, //使用图片路径
active: active
}
}
},
}
需要备注的一点是:在JS部分使用图片路径如果用相对路径是找不着图片的。解决办法,要么是配置配置一下@/ ,要么是引入图片的方式。我是采用的第二种方式,首先引入图片,之后在代码体里进行引用。
今天就到这里啦。休息休息一会儿吧?明天继续加油噢!加油