<template> <el-switch :class="curClassName" :style="curStyle" v-model="curValue" :disabled="disabled"></el-switch> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({}) export default class AppPresetSwitch extends Vue { /** * 开关值 * * @type {*} * @memberof AppPresetSwitch */ @Prop() public value!: any /** * 名称 * * @type {*} * @memberof AppPresetSwitch */ @Prop() public name!: string /** * 布局模型详情 * * @type {*} * @memberof AppPresetSwitch */ @Prop() public layoutModelDetails: any; /** * 下标 * * @type {number} * @memberof AppPresetSwitch */ @Prop({ default: 0 }) public index?: number; /** * 项名称 * * @type {*} * @memberof AppPresetSwitch */ get itemName() { return this.index ? `${this.name}_${this.index}` : this.name; } /** * 类名 * * @memberof AppPresetSwitch */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-preset-switch ${this.itemName} ${layoutModel.sysCss}`; } } /** * 当前容器样式 * * @memberof AppPresetSwitch */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if(layoutModel){ return layoutModel.getElementStyle(); } } /** * 禁用 * * @memberof AppPresetSwitch */ get disabled() { const layoutModel = this.layoutModelDetails[this.itemName]; if(layoutModel){ return layoutModel.disabled; } } /** * 获取开关状态 * * @type {*} * @memberof AppPresetSwitch */ get curValue(): boolean { return !!this.value; } /** * 开关状态发生变化 * * @type {*} * @memberof AppPresetSwitch */ set curValue(value: boolean) { this.$emit('valueChange', { name: this.itemName, value }); } } </script> <style lang='less'> @import './app-preset-switch.less'; </style>