[fix] 修复switch组件交互模式，严格遵守mvvm思想，直接使用v-model绑定值后，切换按钮直接改绑定的值，不再需要@change里面去获取，简化了开发工作量

tuniao-ui/components/tn-input/tn-input.vue

@@ -45,7 +45,7 @@
 		 v-if="type === 'select'"
 		 class="tn-input__text"
 		 > 
-		 {{defaultValue}}
+      <text :class="defaultValue == undefined || defaultValue == '' ? 'tn-input__placeholder':''">{{defaultValue == undefined || defaultValue == '' ? placeholder : defaultValue }}</text>
 		 </view>
 		 
 		 <input
@@ -337,28 +337,7 @@
       /**
        * input事件
        */
-      handleInput:debounceFun(function(event){
-        let value = event.detail.value
-        // 是否需要去掉空格
-        if (this.trim) value = this.$tn.string.trim(value)
-        // 原生事件
-        this.$emit('input', value)
-        // model赋值
-        this.defaultValue = value
-        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
-        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
-        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
-        setTimeout(() => {
-          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
-          // #ifdef MP-TOUTIAO
-          if (this.$tn.string.trim(value) === this.lastValue) return
-          this.lastValue = value
-          // #endif
-
-          // 发送当前的值到form-item进行校验
-          this.dispatch('tn-form-item','on-form-change', value)
-        }, 40)
-      },this.blockTime),
+      handleInput:()=>{},
       /**
        * blur事件
        */
@@ -407,7 +386,35 @@
       inputClick() {
         this.$emit('click')
       }
-    }
+    },
+    mounted() {
+      let that = this;
+      that.handleInput = debounceFun(function(event){
+        let value = event.detail.value
+        // 是否需要去掉空格
+        try {
+          if (that.trim) value = that.$tn.string.trim(value)
+        }catch (e){
+        }
+        // 原生事件
+        that.$emit('input', value)
+        // model赋值
+        that.defaultValue = value
+        // 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+        // 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
+        // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+        setTimeout(() => {
+          // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+          // #ifdef MP-TOUTIAO
+          if (that.$tn.string.trim(value) === that.lastValue) return
+          that.lastValue = value
+          // #endif
+
+          // 发送当前的值到form-item进行校验
+          that.dispatch('tn-form-item','on-form-change', value)
+        }, 40)
+      },that.blockTime);
+    },
   }
 </script>
 
@@ -417,7 +424,11 @@
     flex-direction: row;
     position: relative;
     flex: 1;
-    
+
+    &__placeholder{
+      color: $tn-font-sub-color;
+    }
+
     &__input {
       font-size: 28rpx;
       color: $tn-font-color;

tuniao-ui/components/tn-switch/tn-switch.vue

@@ -2,7 +2,7 @@
   <view
     class="tn-switch-class tn-switch"
     :class="[
-      value ? 'tn-switch--on' : '',
+      switchState ? 'tn-switch--on' : '',
       disabled ? 'tn-switch--disabled' : '',
       `tn-switch--${shape}`
     ]"
@@ -22,7 +22,7 @@
       class="tn-switch__icon tn-switch__icon--left"
       :class="[
         `tn-icon-${leftIcon}`,
-        value ? 'tn-switch__icon--show' : ''
+        switchState ? 'tn-switch__icon--show' : ''
       ]"
       :style="[iconStyle]"></view>
     <!-- 右图标 -->
@@ -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]"></view>
   </view>
@@ -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);
           })
         }
       }