实现Switch开关
<template>
<div>
<span
class="weui-switch" // 初始样式
:class="{'weui-switch-on' : me_checked}" // 选中样式
:value="value"
@click="toggle" // 点击切换
></span>
</div>
</template>
<script>
export default {
// 接收数据 这步可有可无 也可以不用传递直接在这个封装的组件中去写
// 因为后面有$emit 派发事件呢,可直接在其调用的组件中去书写业务逻辑
props: {
value: {
type: Boolean,
default: true
}
},
data() {
return {
me_checked: this.value
}
},
// 监听状态改变 使用 $emit 派发事件
watch: {
me_checked(val) {
this.$emit('input', val);
}
},
methods: {
// 点击切换状态
toggle() {
this.me_checked = !this.me_checked;
}
}
}
</script>
<style>
// 这里写的最多的就是css样式了
/* 初始样式 */
.weui-switch {
display: block;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background-color: #DFDFDF;
transition: background-color 0.1s, border 0.1s;
cursor: pointer;
}
.weui-switch:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #FDFDFD;
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
/* 开的样式 */
.weui-switch-on {
border-color: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:before {
border-color: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:after {
transform: translateX(20px);
}
</style>
哪个组件中想使用,直接调用,我写的一般处理业务逻辑的地方在其父组件中,因为每个地方的需求不一样
<template>
<div>
<Swit v-model="value" @input="inp"></Swit>
</div>
</template>
<script>
import Swit from "@/components/Swit"
import Bus from "../utils/Bus"
export default {
components:{Swit},
data(){
return {
value: false // 初始值
}
},
methods:{
// 这里呢inp就是封装组件里派发的事件 我们可以判断一下为true为false
// 如果为true说明开关已经打开 然后 处理下一步的逻辑
// 如果为false说明开关已经关闭 然后 处理下一步的逻辑
inp(val)
{
console.log(val)
if(val)
{
console.log("现在处于打开状态,可以在这里进行逻辑处理")
}
else
{
console.log("现在处于关闭状态,可以在这里进行逻辑处理")
}
}
}
}
</script>
整体思路还是比较简单的,需要注意的是如果在父组件上调用子组件,并且给子组件绑定v-model
那么在子组件中使用this.$emit
派发事件就ok了,如果是关于input的,那么在派发事件的时候使用this.$emit('input')
;