bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-switch/u-switch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,177 @@
<template>
   <view
       class="u-switch"
       :class="[disabled && 'u-switch--disabled']"
       :style="[switchStyle, $u.addStyle(customStyle)]"
       @tap="clickHandler"
   >
      <view
          class="u-switch__bg"
          :style="[bgStyle]"
      >
      </view>
      <view
          class="u-switch__node"
          :class="[value && 'u-switch__node--on']"
          :style="[nodeStyle]"
          ref="u-switch__node"
      >
         <u-loading-icon
             :show="loading"
             mode="circle"
             timingFunction='linear'
             :color="value ? activeColor : '#AAABAD'"
             :size="size * 0.6"
         />
      </view>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * switch å¼€å…³é€‰æ‹©å™¨
    * @description é€‰æ‹©å¼€å…³ä¸€èˆ¬ç”¨äºŽåªæœ‰ä¸¤ä¸ªé€‰æ‹©ï¼Œä¸”只能选其一的场景。
    * @tutorial https://www.uviewui.com/components/switch.html
    * @property {Boolean}                  loading         æ˜¯å¦å¤„于加载中（默认 false ï¼‰
    * @property {Boolean}                  disabled      æ˜¯å¦ç¦ç”¨ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String | Number}            size         å¼€å…³å°ºå¯¸ï¼Œå•ä½px ï¼ˆé»˜è®¤ 25 ï¼‰
    * @property {String}                  activeColor      æ‰“开时的背景色 ï¼ˆé»˜è®¤ '#2979ff' ï¼‰
    * @property {String}                   inactiveColor   å…³é—­æ—¶çš„背景色 ï¼ˆé»˜è®¤ '#ffffff' ï¼‰
    * @property {Boolean | String | Number}   value         é€šè¿‡v-model双向绑定的值 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean | String | Number}   activeValue      æ‰“开选择器时通过change事件发出的值 ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Boolean | String | Number}   inactiveValue   å…³é—­é€‰æ‹©å™¨æ—¶é€šè¿‡change事件发出的值 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean}                  asyncChange      æ˜¯å¦å¼€å¯å¼‚步变更，开启后需要手动控制输入值 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String | Number}            space         åœ†ç‚¹ä¸Žå¤–边框的距离 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {Object}                  customStyle      å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    *
    * @event {Function} change åœ¨switch打开或关闭时触发
    * @example <u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>
    */
   export default {
      name: "u-switch",
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      watch: {
         value: {
            immediate: true,
            handler(n) {
               if(n !== this.inactiveValue && n !== this.activeValue) {
                  uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
               }
            }
         }
      },
      data() {
         return {
            bgColor: '#ffffff'
         }
      },
      computed: {
         isActive(){
            return this.value === this.activeValue;
         },
         switchStyle() {
            let style = {}
            // è¿™é‡Œéœ€è¦åŠ 2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
            style.width = uni.$u.addUnit(this.size * 2 + 2)
            style.height = uni.$u.addUnit(Number(this.size) + 2)
            // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
            // å¦‚果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
            // è¿™é‡Œä¸èƒ½ç®€å•çš„设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
            if(this.customInactiveColor) {
               style.borderColor = 'rgba(0, 0, 0, 0)'
            }
            style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
            return style;
         },
         nodeStyle() {
            let style = {}
            // å¦‚果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
            style.width = uni.$u.addUnit(this.size - this.space)
            style.height = uni.$u.addUnit(this.size - this.space)
            const translateX = this.isActive ? uni.$u.addUnit(this.space) : uni.$u.addUnit(this.size);
            style.transform = `translateX(-${translateX})`
            return style
         },
         bgStyle() {
            let style = {}
            // è¿™é‡Œé…ç½®ä¸€ä¸ªå¤šä½™çš„元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
            style.width = uni.$u.addUnit(Number(this.size) * 2 - this.size / 2)
            style.height = uni.$u.addUnit(this.size)
            style.backgroundColor = this.inactiveColor
            // æ‰“开时，让此元素收缩，否则反之
            style.transform = `scale(${this.isActive ? 0 : 1})`
            return style
         },
         customInactiveColor() {
            // ä¹‹æ‰€ä»¥éœ€è¦åˆ¤æ–­æ˜¯å¦è‡ªå®šä¹‰äº†â€œéžæ¿€æ´»â€é¢œè‰²ï¼Œæ˜¯ä¸ºäº†è®©node圆点离外边框更宽一点的距离
            return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
         }
      },
      methods: {
         clickHandler() {
            if (!this.disabled && !this.loading) {
               const oldValue = this.isActive ? this.inactiveValue : this.activeValue
               if(!this.asyncChange) {
                  this.$emit('input', oldValue)
               }
               // æ”¾åˆ°ä¸‹ä¸€ä¸ªç”Ÿå‘½å‘¨æœŸï¼Œå› ä¸ºåŒå‘绑定的value修改父组件状态需要时间，且是异步的
               this.$nextTick(() => {
                  this.$emit('change', oldValue)
               })
            }
         }
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-switch {
      @include flex(row);
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
      position: relative;
      background-color: #fff;
      border-width: 1px;
      border-radius: 100px;
      transition: background-color 0.4s;
      border-color: rgba(0, 0, 0, 0.12);
      border-style: solid;
      justify-content: flex-end;
      align-items: center;
      // ç”±äºŽweex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
      // å¦åˆ™åœ¨iOS上，点击页面任意地方，都会触发switch的点击事件
      overflow: hidden;

      &__node {
         @include flex(row);
         align-items: center;
         justify-content: center;
         border-radius: 100px;
         background-color: #fff;
         border-radius: 100px;
         box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
         transition-property: transform;
         transition-duration: 0.4s;
         transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
      }

      &__bg {
         position: absolute;
         border-radius: 100px;
         background-color: #FFFFFF;
         transition-property: transform;
         transition-duration: 0.4s;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         transition-timing-function: ease;
      }

      &--disabled {
         opacity: 0.6;
      }
   }
</style>