switch组件

组件基本代码

<template>
    <div class="tls-switch" :class="{'is-checked':value}" @click="handleClick">
        <input class="tls-switch__input" :checked="value" type="checkbox" :name="name" />
        <span class="tls-switch__core" ref="core">
            <span class="tls-switch__button"></span>
        </span>
    </div>
</template>

这里写的input标签是为了后期可能大概也许集成表单做的，如果不想的话可以不用，而且input在样式中也给隐藏了。

组件可接受的参数props

value（接收父组件的v-model）

        value: {
            type: Boolean,
            default: false
        }

name（为了后期集成写表单做的）

        name: {
            type: String,
            default: ""
        },

activeColor（当值为true的时候显示的颜色）

        activeColor: {
            type: String,
            default: ""
        },

inactiveColor（当值为false的时候显示的颜色）

        inactiveColor: {
            type: String,
            default: ""
        }

组件样式初始化

如果我们一进来就有传值修改组件显示的颜色，那么我们就需要在mounted生命周期里面去修改组件样式

    mounted() {
        this.setColor();//设置组件样式的方法，具体实现在下面
    },

事件监听

    watch: {
        value: {
            //监听值的变化去修改颜色
            handler() {
                this.setColor();
            }
        }
    },

这里用了vue的监听方法，不会的同学可以点击这里，watch的写法挺多的，我这里用了最简单的写法，immediate和deep都没有去用到

组件事件

handleClick（当用户点击的时候触发）

        handleClick() {
            //vue语法糖 修改传入的value
            this.$emit("input", !this.value);
        },

setColor（修改颜色）

        setColor() {
            if (this.activeColor || this.inactiveColor) {
                let color = this.value ? this.activeColor : this.inactiveColor;
                this.$refs.core.style.borderColor = color;
                this.$refs.core.style.backgroundColor = color;
            }
        }

组件样式

css欢迎自取

emmmm，还是贴上来吧

<style lang="scss">
.tls-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
    .tls-switch__core {
        margin: 0;
        display: inline-block;
        position: relative;
        width: 40px;
        height: 20px;
        border: 1px solid #dcdfe6;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #dcdfe6;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s;
        vertical-align: middle;
        .tls-switch__button {
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all 0.3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }
    }
}
.tls-switch.is-checked {
    .tls-switch__core {
        border-color: #409eff;
        background-color: #409eff;
        .tls-switch__button {
            transform: translateX(20px);
        }
    }
}
.tls-switch__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}
</style>

怎么用

<tls-switch v-model="value" name="name" active-color="#13ce66" inactive-color="#ff4949"></tls-switch>

这个组件其实不难，主要是要记得去监听值的变化，及时修改组件的显示样式。哦，还有就是组件渲染的时候记得去初始化样式（如果有传值的话）

日常吐槽

lol连跪，只能敲敲代码冷静冷静。