地址替换

zengh

2022-06-21 4efeb31d5b4921d7e851c256009486ad86bc70e2

 uview-ui/components/u-subsection/u-subsection.vue

New file
@@ -0,0 +1,355 @@
<template>
   <view class="u-subsection" :style="[subsectionStyle]">
      <view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
       v-for="(item, index) in listInfo" :key="index">
         <view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
      </view>
      <view class="u-item-bg" :style="[itemBarStyle]"></view>
   </view>
</template>

<script>
   /**
    * subsection 分段器
    * @description 该分段器一般用于用户从几个选项中选择某一个的场景
    * @tutorial https://www.uviewui.com/components/subsection.html
    * @property {Array} list 选项的数组，形式见上方"基本使用"
    * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
    * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
    * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
    * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
    * @property {String Number} font-size 字体大小，单位rpx（默认28）
    * @property {String Number} height 组件高度，单位rpx（默认70）
    * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
    * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
    * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
    * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
    * @event {Function} change 分段器选项发生改变时触发
    * @example <u-subsection active-color="#ff9900"></u-subsection>
    */
   export default {
      name: "u-subsection",
      props: {
         // tab的数据
         list: {
            type: Array,
            default () {
               return [];
            }
         },
         // 当前活动的tab的index
         current: {
            type: [Number, String],
            default: 0
         },
         // 激活的颜色
         activeColor: {
            type: String,
            default: '#303133'
         },
         // 未激活的颜色
         inactiveColor: {
            type: String,
            default: '#606266'
         },
         // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
         mode: {
            type: String,
            default: 'button'
         },
         // 字体大小，单位rpx
         fontSize: {
            type: [Number, String],
            default: 28
         },
         // 是否开启动画效果
         animation: {
            type: Boolean,
            default: true
         },
         // 组件的高度，单位rpx
         height: {
            type: [Number, String],
            default: 70
         },
         // 激活tab的字体是否加粗
         bold: {
            type: Boolean,
            default: true
         },
         // mode=button时，组件背景颜色
         bgColor: {
            type: String,
            default: '#eeeeef'
         },
         // mode = button时，滑块背景颜色
         buttonColor: {
            type: String,
            default: '#ffffff'
         },
         // 在切换分段器的时候，是否让设备震一下
         vibrateShort: {
            type: Boolean,
            default: false
         }
      },
      data() {
         return {
            listInfo: [],
            itemBgStyle: {
               width: 0,
               left: 0,
               backgroundColor: '#ffffff',
               height: '100%',
               transition: ''
            },
            currentIndex: this.current,
            buttonPadding: 3, // mode = button 时，组件的内边距
            borderRadius: 5, // 圆角值
            firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
         };
      },
      watch: {
         current: {
            immediate: true,
            handler(nVal) {
               this.currentIndex = nVal;
               this.changeSectionStatus(nVal);
            }
         }
      },
      created() {
         // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
         // 可以接受直接数组形式，或者数组元素为对象的形式，如：['简介', '评论'],或者[{name: '简介'}, {name: '评论'}]
         this.listInfo = this.list.map((val, index) => {
            if (typeof val != 'object') {
               let obj = {
                  width: 0,
                  name: val
               };
               return obj;
            } else {
               val.width = 0;
               return val;
            }
         });
      },
      computed: {
         // 设置mode=subsection时，滑块特有的样式
         noBorderRight() {
            return index => {
               if (this.mode != 'subsection') return;
               let classs = '';
               // 不显示右边的边框
               if (index < this.list.length - 1) classs += ' u-none-border-right';
               // 显示整个组件的左右边圆角
               if (index == 0) classs += ' u-item-first';
               if (index == this.list.length - 1) classs += ' u-item-last';
               return classs;
            };
         },
         // 文字的样式
         textStyle() {
            return index => {
               let style = {};
               // 设置字体颜色
               if (this.mode == 'subsection') {
                  if (index == this.currentIndex) {
                     style.color = '#ffffff';
                  } else {
                     style.color = this.activeColor;
                  }
               } else {
                  if (index == this.currentIndex) {
                     style.color = this.activeColor;
                  } else {
                     style.color = this.inactiveColor;
                  }
               }
               // 字体加粗
               if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
               // 文字大小
               style.fontSize = this.fontSize + 'rpx';
               return style;
            };
         },
         // 每个分段器item的样式
         itemStyle() {
            return index => {
               let style = {};
               if (this.mode == 'subsection') {
                  // 设置border的样式
                  style.borderColor = this.activeColor;
                  style.borderWidth = '1px';
                  style.borderStyle = 'solid';
               }
               return style;
            };
         },
         // mode=button时，外层view的样式
         subsectionStyle() {
            let style = {};
            style.height = uni.upx2px(this.height) + 'px';
            if (this.mode == 'button') {
               style.backgroundColor = this.bgColor;
               style.padding = `${this.buttonPadding}px`;
               style.borderRadius = `${this.borderRadius}px`;
            }
            return style;
         },
         // 滑块的样式
         itemBarStyle() {
            let style = {};
            style.backgroundColor = this.activeColor;
            style.zIndex = 1;
            if (this.mode == 'button') {
               style.backgroundColor = this.buttonColor;
               style.borderRadius = `${this.borderRadius}px`;
               style.bottom = `${this.buttonPadding}px`;
               style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
               style.zIndex = 0;
            }
            return Object.assign(this.itemBgStyle, style);
         }
      },
      mounted() {
         setTimeout(() => {
            this.getTabsInfo();
         }, 10);
      },
      methods: {
         // 改变滑块的样式
         changeSectionStatus(nVal) {
            if (this.mode == 'subsection') {
               // 根据滑块在最左边和最右边时，显示左边和右边的圆角
               if (nVal == this.list.length - 1) {
                  this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
               }
               if (nVal == 0) {
                  this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
               }
               if (nVal > 0 && nVal < this.list.length - 1) {
                  this.itemBgStyle.borderRadius = '0';
               }
            }
            // 更新滑块的位置
            setTimeout(() => {
               this.itemBgLeft();
            }, 10);
            if (this.vibrateShort && !this.firstTimeVibrateShort) {
               // 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
               // #ifndef H5
               uni.vibrateShort();
               // #endif
            }
            // 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
            this.firstTimeVibrateShort = false;
         },
         click(index) {
            // 不允许点击当前激活选项
            if (index == this.currentIndex) return;
            this.currentIndex = index;
            this.changeSectionStatus(index);
            this.$emit('change', Number(index));
         },
         // 获取各个tab的节点信息
         getTabsInfo() {
            let view = uni.createSelectorQuery().in(this);
            for (let i = 0; i < this.list.length; i++) {
               view.select('.u-item-' + i).boundingClientRect();
            }
            view.exec(res => {
               if (!res.length) {
                  setTimeout(() => {
                     this.getTabsInfo();
                     return;
                  }, 10);
               }
               // 将分段器每个item的宽度，放入listInfo数组
               res.map((val, index) => {
                  this.listInfo[index].width = val.width;
               });
               // 初始化滑块的宽度
               if (this.mode == 'subsection') {
                  this.itemBgStyle.width = this.listInfo[0].width + 'px';
               } else if (this.mode == 'button') {
                  this.itemBgStyle.width = this.listInfo[0].width + 'px';
               }
               // 初始化滑块的位置
               this.itemBgLeft();
            });
         },
         itemBgLeft() {
            // 根据是否开启动画效果，
            if (this.animation) {
               this.itemBgStyle.transition = 'all 0.35s';
            } else {
               this.itemBgStyle.transition = 'all 0s';
            }
            let left = 0;
            // 计算当前活跃item到组件左边的距离
            this.listInfo.map((val, index) => {
               if (index < this.currentIndex) left += val.width;
            });
            // 根据mode不同模式，计算滑块需要移动的距离
            if (this.mode == 'subsection') {
               this.itemBgStyle.left = left + 'px';
            } else if (this.mode == 'button') {
               this.itemBgStyle.left = left + this.buttonPadding + 'px';
            }
         }
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/style.components.scss";
	
   .u-subsection {
      @include vue-flex;
      align-items: center;
      overflow: hidden;
      position: relative;
   }

   .u-item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      height: 100%;
      @include vue-flex;
      align-items: center;
      justify-content: center;
      color: $u-main-color;
      padding: 0 6rpx;
   }

   .u-item-bg {
      background-color: $u-type-primary;
      position: absolute;
      z-index: -1;
   }

   .u-none-border-right {
      border-right: none !important;
   }

   .u-item-first {
      border-top-left-radius: 8rpx;
      border-bottom-left-radius: 8rpx;
   }

   .u-item-last {
      border-top-right-radius: 8rpx;
      border-bottom-right-radius: 8rpx;
   }

   .u-item-text {
      transition: all 0.35s;
      color: $u-main-color;
      @include vue-flex;
      align-items: center;
      position: relative;
      z-index: 3;
   }
</style>