yanzong_qianduan/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue

<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>
      <u-badge
        v-if="item.num > 0"
        :count="item.num"
        :offset="offset"
        size="mini"
      ></u-badge>
    </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",
  emits: ["change", "update:modelValue", "input"],
  props: {
    // tab的数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {
      type: [String, Number],
      default: 0,
    },
    modelValue: {
      type: [String, Number],
      default: 0,
    },
    // 当前活动的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,
    },
    offset: {
      type: Array,
      default: function () {
        return [0, 0];
      },
    },
  },
  data() {
    return {
      itemBgStyle: {
        width: 0,
        left: 0,
        backgroundColor: "#ffffff",
        height: "100%",
        transition: "",
      },
      currentIndex: this.current,
      buttonPadding: 3, // mode = button 时，组件的内边距
      borderRadius: 5, // 圆角值
      firstTimeVibrateShort: true, // 组件初始化时，会触发current变化，此时不应震动
      listInfo: [],
    };
  },
  watch: {
    valueCom: {
      immediate: true,
      handler(nVal) {
        if (!nVal) nVal = 0;
        this.currentIndex = nVal;
        this.changeSectionStatus(nVal);
      },
    },
    current: {
      immediate: true,
      handler(nVal) {
        if (!nVal) nVal = this.valueCom || 0;
        this.currentIndex = nVal;
        this.changeSectionStatus(nVal);
      },
    },
    list: {
      deep: true,
      handler(nVal = []) {
        this.listInfoFn();
        setTimeout(() => {
          this.getTabsInfo();
        }, 10);
      },
    },
  },
  computed: {
    valueCom() {
      // #ifndef VUE3
      return this.value;
      // #endif

      // #ifdef VUE3
      return this.modelValue;
      // #endif
    },
    // 设置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() {
    this.listInfoFn();
    setTimeout(() => {
      this.getTabsInfo();
    }, 10);
  },
  methods: {
    listInfoFn() {
      let { list = [] } = this;
      this.listInfo = this.list.map((val, index) => {
        if (typeof val != "object") {
          let obj = {
            width: 0,
            name: val,
          };
          return obj;
        } else {
          return val;
        }
      });
      return this.listInfo;
    },
    // 改变滑块的样式
    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));
      this.$emit("input", Number(index));
      this.$emit("update:modelValue", 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.listInfo) {
          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;
  position: relative;
}

.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>