app-switch.vue 2.1 KB
Newer Older
1
<template>
2 3 4 5 6 7
    <el-switch
        v-model="curValue"
        :disabled="disabled || readonly"
        :active-text="activeText"
        :inactive-text="inactiveText"
    ></el-switch>
8 9 10
</template>

<script lang="ts">
11
import { Vue, Component, Prop } from "vue-property-decorator";
12 13 14 15 16 17 18 19 20 21

@Component({})
export default class AppSwitch extends Vue {
    /**
     * checked选中状态
     * @type {boolean}
     * @memberof Appswitch
     */
    @Prop() public value?: any;

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
    /**
     * 禁用
     * @type {boolean}
     * @memberof Appswitch
     */
    @Prop() public disabled?: boolean;

    /**
     * 只读模式
     * @type {boolean}
     * @memberof Appswitch
     */
    @Prop({ default: false }) public readonly?: boolean;

    /**
     * 开关前后缀
     * @type {*}
     * @memberof Appswitch
     */
    @Prop({ default: () => [] }) public dicData?: any;

    /**
     * 开关前缀label
     * @type {*}
     * @memberof Appswitch
     */
    public inactiveText: any = null;

    /**
     * 开关后缀label
     * @type {*}
     * @memberof Appswitch
     */
    public activeText: any = null;

    /**
     * 获取值
     * @memberof Appswitch
     */
61 62 63 64
    get curValue() {
        return this.value == 1 ? true : false;
    }

65 66 67 68 69
    /**
     * 设置值
     * @param value
     * @memberof Appswitch
     */
70 71
    set curValue(value: any) {
        let emitValue = value == true ? 1 : 0;
72
        this.$emit("change", emitValue);
73 74 75
    }

    /**
76 77
     * create生命周期,初始化前后缀
     * @type {*}
78 79
     * @memberof Appswitch
     */
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    public created() {
        if (this.dicData && Array.isArray(this.dicData)) {
            const result_inactive = this.dicData.find((item: any) => {
                return item.value === 0;
            });
            if (result_inactive) {
                this.inactiveText = result_inactive.label;
            }
            const result_active = this.dicData.find((item: any) => {
                return item.value === 1;
            });
            if (result_active) {
                this.activeText = result_active.label;
            }
        }
    }
96 97
}
</script>