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

SwitchCell是Switch的一个扩展。

准备工作：

1. 创建一个页面:SwitchCell.vue
2. 在router.js里配置SwitchCell页面的路由

{
 path: '/switchCell',
 name: 'switchCell',
 component: () => import('./views/SwitchCell.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/switchCell')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>SwitchCell 开关单元格</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了18个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示SwitchCell开关单元格：

基础方法：

<van-cell-group>
 <van-switch-cell v-model="checked" title="喜欢苹果吗？" />
</van-cell-group>
data() {
 return {
 checked: true
 }
},

和Switch一样，也支持input事件上和change事件：

onInput(checked) {
 this.$dialog.confirm({
 title: "注意！",
 message: "是否切换天关"
 }).then(() => {
 console.log(this.checked)
 this.checked = checked
 }).catch(() => {
 console.log(this.checked)
 })
},

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