vue2组件系列第二十一节:Switch 开关

Switch开关在项目开发中用的频率不是很高，偶尔会用到。但是很喜欢它的这个动画效果，用起来很顺滑，感觉很有意思。今天我们就来看看是如何实现它的吧！

准备工作：

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

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

1. 在index.vue里添加一项

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

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

代码演示Switch开关：

基础用法：

<van-switch v-model="checked" />
data() {
 return {
 checked: true
 }
},

就这么简单，一个简单的Switch开关就实现了！

高级用法：

Switch开关支持size属性，可以设置开关的大小。还可以修改打开和关闭的颜色，分别设置属性active-color和inactive-color(PS：设置这两个颜色我依然没有测试成功，不知道什么原因。如果有小伙伴们有测试成功的话，可以告知一下)。还支持input事件，当Switch改变时，会做出响应。返回值是选中的状态。我们会用到之前学到的dialog组件。

<van-switch 
 v-model="checked"
 size="40px"
 active-color="red"
 inactive-color="#000"
 @input="onInput"
/>
onInput(checked) {
 this.$dialog.confirm({
 title: "注意！",
 message: "是否切换天关"
 }).then(() => { //按确认走的路线
 console.log(this.checked) 
 this.checked = checked
 }).catch(() => { //按取消走的路线
 console.log(this.checked)
 })
},

还有一个change事件，与input事件类似。

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