四时宝库

程序员的知识宝库

vue2组件系列第二十三节:Checkbox 复选框

Checkbox复选框的使用频率还是挺高的,Vant提供了多种样式供选择。

准备工作:

  1. 创建一个页面: Checkbox.vue
  2. 在router.js里配置 Checkbox页面的路由
Bash
{
 path: '/checkbox',
 name: 'checkbox',
 component: () => import('./views/Checkbox.vue')
 }
  1. 在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部分使用图片路径如果用相对路径是找不着图片的。解决办法,要么是配置配置一下@/ ,要么是引入图片的方式。我是采用的第二种方式,首先引入图片,之后在代码体里进行引用。

今天就到这里啦。休息休息一会儿吧?明天继续加油噢!加油

上一节:vue2组件系列第二十二节:SwitchCell 开关单元格

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接