diff --git a/tuniao-ui/components/tn-switch/tn-switch.vue b/tuniao-ui/components/tn-switch/tn-switch.vue index ba9c419..7280813 100644 --- a/tuniao-ui/components/tn-switch/tn-switch.vue +++ b/tuniao-ui/components/tn-switch/tn-switch.vue @@ -2,7 +2,7 @@ @@ -31,7 +31,7 @@ class="tn-switch__icon tn-switch__icon--right" :class="[ `tn-icon-${rightIcon}`, - !value ? 'tn-switch__icon--show' : '' + !switchState ? 'tn-switch__icon--show' : '' ]" :style="[iconStyle]"> @@ -42,7 +42,7 @@ name: 'tn-switch', props: { value: { - type: Boolean, + type: [Number, String, Boolean], default: false }, // 按钮的样式 @@ -106,7 +106,7 @@ switchStyle() { let style = {} style.fontSize = this.$tn.string.getLengthUnitValue(this.size) - style.backgroundColor = this.value ? + style.backgroundColor = this.switchState ? this.activeColor ? this.activeColor : '#01BEFF' : this.inactiveColor ? this.inactiveColor : '#AAAAAA' return style @@ -124,22 +124,33 @@ return style }, loadingColor() { - return this.value ? this.activeColor : '' + return this.switchState ? this.activeColor : '' + } + }, + watch:{ + value:{ + handler(newVal,oldVal){ + this.switchState = (this.value == this.activeValue); + } } }, data() { return { - + switchState:false } }, + mounted() { + this.switchState = (this.value == this.activeValue); + }, methods: { click() { + this.switchState = !this.switchState; if (!this.disabled && !this.loading) { if (this.vibrateShort) uni.vibrateShort() - this.$emit('input', !this.value) + this.$emit('input', this.switchState ? this.activeValue : this.inactiveValue) // 放到下一个生命周期,因为双向绑定的value修改父组件状态需要时间,且是异步的 this.$nextTick(() => { - this.$emit('change', this.value ? this.activeValue : this.inactiveValue); + this.$emit('change', this.switchState ? this.activeValue : this.inactiveValue); }) } }