<!--
 * @name: su-switch
 * @Descripttion: 开关
-->
<template>
    <div>
        <el-switch
            class="switch"
            v-model="model"
            v-bind="$attrs"
            v-on="$listeners"
            @change="handleChange($event)">
        </el-switch>
    </div>
</template>

<script>
export default {
    name: "seSwitch",
    props: {
        value: {
            type: [Boolean, String, Number],
            default: ""
        },
    },
    model: { // 定义实现v-modal的属性与事件
        prop: 'value',
        event: 'changeStatus'
    },
    data() {
        return {
            model: null,
        }
    },
    watch: {
        //监听用户的值
        value: {
            immediate: true,
            handler(newVal) {
                this.model = newVal;
            }
        },
    },
    methods: {
        handleChange(data) {
            this.$emit('changeStatus', data);
        },
    }
}
</script>

<style scoped lang="less">
/deep/ .switch {
    height: 25px;
    line-height: 25px;

    .el-switch__core {
        height: 25px;
        border-radius: 13px;
    }

    .el-switch__core::after {
        top: 4px;
    }

    /* switch按钮样式 */
    .el-switch__label {
        position: absolute;
        display: none;
        color: #fff !important;
        height: 25px;
    }

    /*打开时文字位置设置*/
    .el-switch__label--right {
        left: 0;
        z-index: 1;
    }

    /*关闭时文字位置设置*/
    .el-switch__label--left {
        right: 0;
        z-index: 1;
    }

    /*显示文字*/
    .el-switch__label.is-active {
        display: block;
    }
}
</style>
