kuailelunwen_new_houtai/src/components/GuipSwitch.vue

<template>
    <el-form-item :prop="prop" :label="label" :rules="rules">
        <div class="switchWrap">
            <span :class="['switchDesc', { 'fl': float == 'left' }, { 'fr': float == 'right' }]"
                v-if="activeText || inactiveText">
                {{ internalValue === activeValue ? activeText : inactiveText
                }}</span>

            <el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor"
                v-bind="$attrs" :disabled="disabled" :active-value="activeValue" :inactive-value="inactiveValue"
                @change="handleChange">
                <!-- 自定义开启时的图标 -->
                <template #active-icon>
                </template>
                <!-- 自定义关闭时的图标 -->
                <template #inactive-icon>
                </template>
            </el-switch>
        </div>
    </el-form-item>
</template>

<script>
export default {
    name: 'GuipSwitchå',
    inheritAttrs: false,
    props: {
        // modelValue: { type: [Boolean, String, Number], default: undefined },
        value: { type: [Boolean, String, Number], default: undefined },
        prop: String,
        label: String,
        rules: Array,
        labelWidth: String,
      
        activeText: {
            type: String,
            default: '',
        },
        inactiveText: {
            type: String,
            default: '',
        },
        activeValue: {
            type: [Boolean, String, Number],
            default: true,
        },
        inactiveValue: {
            type: [Boolean, String, Number],
            default: false,
        },
        activeColor: {
            type: String,
            default: '#00C261',
        },
        inactiveColor: {
            type: String,
            default: '#BABDC2',
        },
        float: {
            type: String,
            default: 'left',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            internalValue: this.value,
            errorMsg: ''
        }
    },
    computed: {
        // internalValue: {
        //     get() {
        //         return this.modelValue !== undefined ? this.modelValue : this.value
        //     },
        //     set(val) {
        //         this.$emit('update:modelValue', val)
        //         this.$emit('input', val)
        //     }
        // }
    },
    watch: {
        value(newVal) {
            this.internalValue = newVal
        },
        // modelValue(newVal) {
        //     this.internalValue = newVal
        // },
    },
    methods: {
        handleChange(val) {
            // this.$emit('update:modelValue', val)
            this.$emit('input', val)
            this.$emit('change', val)
            this.validateField()
        },
        validateField() {
            if (this.prop && this.$parent.validateField) {
                this.$parent.validateField(this.prop, (error) => {
                    this.errorMsg = error || ''
                })
            }
        }
    }
}
</script>

<style scoped>
.switchWrap {
    /* align-items: center; */
}

.fl {
    float: left;
    margin-right: 12px;
}

.fr {
    float: right;
    margin-left: 12px;
}

.switchDesc {
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.08em;
    font-variation-settings: "opsz" auto;
    /* text/text_3 */
    color: #626573;
    display: inline-block;
}

.error-msg {
    color: #f56c6c;
    font-size: 12px;
    margin-left: 10px;
}
</style>