做一个个性化的switch切换按钮

需求背景：公司有个微信小程序项目，需要用到大量独特的切换按钮，类似开关这种按钮，微信小程序自带的switch是不能填写文字的，所以直接，而且微信小程序使用的框架是基于vue的mpvue，mpvue出来的时间也短，估计很少这种轮子，所以就只能自己手撸一个，因为是微信小程序所以像素单位是rpx，如果是普通vue项目也可以直接用这个组件，修改像素单位即可单位

<template>
    <div id="myswitchBox" @click="handleClick" :style="bg">
        <span :class="{swText:isTrues,swTexts:isTrue}" :style="inOutText">{{valueText}}</span>
        <i :class="{circle:isTrues,circles:isTrue}"></i>
    </div>    
</template>

<script>
export default{
    props: ["mode"],
    data () {
        return {
            isTrue:false,
            isTrues:true
        }
    },
    computed: {
        bg(){         
            if(this.mode=="是否"||this.mode=="一般严重"||this.mode=="有无"){
                if(this.isTrues){
                    return "background: #cccccc;"
                }else{
                    return "background: #F168A8;"
                }
            }else if(this.mode=="内墙外墙"){
                if(this.isTrues){
                    return "background: #648FF3"
                }else{
                    return "background: #F168A8;"
                }
            }
        },
        inOutText(){
            if(this.mode=="内墙外墙"||this.mode=="一般严重"){
                if(this.valueText=="内墙"||this.valueText=="一般"){
                    return "transform:translate(12px,0)"
                }else{
                    return "transform:translate(-12px,0)"
                }
            }else{
                return ""
            }
        },
        valueText(){
            if(this.mode=="是否"){
                if(this.isTrue){
                    return "是"
                }else{
                    return "否"
                }
            }else if(this.mode=="内墙外墙"){
                if(this.isTrue){
                    return "外墙"
                }else{
                    return "内墙"
                }
            }else if(this.mode=="一般严重"){
                if(this.isTrue){
                    return "严重"
                }else{
                    return "一般"
                }
            }else if(this.mode=="有无"){
                if(this.isTrue){
                    return "有"
                }else{
                    return "无"
                }
            }
        }

    },
    methods: {
        handleClick(){
            if(this.isTrue){
                this.isTrue = false;
                this.isTrues = true;
                this.$emit("myClick",this.valueText);
            }else{
                this.isTrue = true;
                this.isTrues = false;
                this.$emit("myClick",this.valueText);
            }
        }
    }
}
</script>

<style scoped>
#myswitchBox{
    width: 120px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    position: relative;
    display: flex;
    align-items: center;
}
#myswitchBox .circle{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 0;
    top: 2px;
}
#myswitchBox .circles{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: white;
    position: absolute;
    right: 0;
    top: 2px;
}
#myswitchBox .swText{
    display: inline-block;
    position: absolute;
    right: 28px;
    color: white;
}
#myswitchBox .swTexts{
    display: inline-block;
    position: absolute;
    left: 28px;
    color: white;
}
</style>

注释：这是一个单独的vue组件，可以直接引入使用，可以传入mode参数，可以自己修改，