bab-icon/resources/js/components/UiSwitch.vue

<template>
    <el-row class="form-group">
        <el-col style="min-height:50px;padding-top:5px;" :span="3">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Switch'}}</label>
        </el-col>
        <el-col :span="14" style="min-height:50px;padding-top:5px;">
            <div id='ui-switch-input'>
                  <el-switch v-model="value1"
                    :disabled="disabled ? true : false"
                    :width="width == 40 ? 40 : 58"
                    :active-text="activeText ? activeText : 'ON'"
                    :inactive-text="inactiveText ? inactiveText : 'OFF'"
                    :active-value="1"
                    :inactive-value="0"
                    :active-color="activeColor ? activeColor : '#20A0FF'"
                    :inactive-color="inactiveColor ? inactiveColor : '#C0CCDA'"
                    :name="name ? name : 'switch'"
                    :id="name"
                    @change="change">
                  </el-switch>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','disabled','width','activeText','inactiveText','activeColor','inactiveColor','name','checked','tips'],
        data() {
            return {
                value1: this.checked ? 1 : 0
            }
        },
        mounted() {
            var checked = this._props.checked ? true : false;
            var th = $(document).find('#ui-switch-input').find('#'+this._props.name);
            if ( checked ) {
                // 开启
                var val = th.attr('true-value');
                th.val(val)
            }else{
                // 关闭
                var val = th.attr('false-value');
                th.val(val);
            }
        },
        methods: {
            change(value) {
                var th = $(document).find('#ui-switch-input').find('#'+this._props.name);
                if( value ){
                    var val = th.attr('true-value');
                    th.val(val)
                }else{
                    var val = th.attr('false-value');
                    th.val(val);
                }
            }
        }
    }
</script>

<style scoped>
    .el-switch__input {
        display: none;
    }
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>