2025/2/8第一次更新

dist/dev/mp-weixin/components/firstui/fui-tabs/fui-tabs.js

@@ -0,0 +1,308 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = {
+  name: "fui-tabs",
+  emits: ["change"],
+  options: {
+    virtualHost: true
+  },
+  props: {
+    // 标签页数据源
+    tabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    nameKey: {
+      type: String,
+      default: "name"
+    },
+    badgeKey: {
+      type: String,
+      default: "badge"
+    },
+    disabledKey: {
+      type: String,
+      default: "disabled"
+    },
+    // 当前选项卡
+    current: {
+      type: Number,
+      default: 0
+    },
+    // 是否可以滚动
+    scroll: {
+      type: Boolean,
+      default: false
+    },
+    // tab高度 rpx
+    height: {
+      type: [Number, String],
+      default: 96
+    },
+    background: {
+      type: String,
+      default: "#fff"
+    },
+    //字体大小
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: ""
+    },
+    //选中前字重
+    fontWeight: {
+      type: [Number, String],
+      default: "normal"
+    },
+    //仅Nvue端生效，代替scale属性
+    selectedSize: {
+      type: [Number, String],
+      default: 32
+    },
+    //选中后字体颜色
+    selectedColor: {
+      type: String,
+      default: ""
+    },
+    //选中后字重
+    selectedFontWeight: {
+      type: [Number, String],
+      default: 500
+    },
+    //选中后字体缩放倍数
+    //Nvue端 Android 暂不支持设置overflow:visible，放大后文字超出部分被隐藏
+    scale: {
+      type: [Number, String],
+      default: 1.2
+    },
+    badgeColor: {
+      type: String,
+      default: "#fff"
+    },
+    badgeBackground: {
+      type: String,
+      default: ""
+    },
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    isSlider: {
+      type: Boolean,
+      default: true
+    },
+    //滑块高度
+    sliderHeight: {
+      type: [Number, String],
+      default: 5
+    },
+    //滑块背景颜
+    sliderBackground: {
+      type: String,
+      default: ""
+    },
+    //滑块 radius
+    sliderRadius: {
+      type: [Number, String],
+      default: -1
+    },
+    //滑块左右padding值
+    padding: {
+      type: [Number, String],
+      default: 0
+    },
+    //滑块bottom
+    bottom: {
+      type: [Number, String],
+      default: 0
+    },
+    //滑块是否固定为较短的长度45rpx
+    short: {
+      type: Boolean,
+      default: true
+    },
+    //滑块是否居中显示
+    center: {
+      type: Boolean,
+      default: false
+    },
+    //是否固定
+    isFixed: {
+      type: Boolean,
+      default: false
+    },
+    //吸顶效果，为true时isFixed失效
+    isSticky: {
+      type: Boolean,
+      default: false
+    },
+    //isFixed或isSticky为true时，tabs top值 px
+    top: {
+      type: [Number, String],
+      default: 0
+    },
+    //当数据不满一屏时，item项是否靠左对齐，默认均分铺满
+    alignLeft: {
+      type: Boolean,
+      default: false
+    },
+    //tabs item项排列方式：row、column
+    direction: {
+      type: String,
+      default: "row"
+    },
+    itemPadding: {
+      type: [Number, String],
+      default: 32
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 996
+    }
+  },
+  watch: {
+    tabs(vals) {
+      this.initData(vals);
+    },
+    current(newVal, oldVal) {
+      this.switchTab(newVal);
+    }
+  },
+  created() {
+    this.initData(this.tabs);
+  },
+  computed: {
+    getSelectedColor() {
+      let color = this.selectedColor;
+      return color;
+    },
+    getSliderBgColor() {
+      let color = this.sliderBackground;
+      return color;
+    },
+    getBadgeBgColor() {
+      let color = this.badgeBackground;
+      return color;
+    }
+  },
+  data() {
+    let isNvue = false;
+    return {
+      vals: [],
+      scrollInto: "",
+      tabIndex: 0,
+      isNvue
+    };
+  },
+  methods: {
+    getId() {
+      return `fui_${Math.ceil(Math.random() * 1e6).toString(36)}`;
+    },
+    initData(vals) {
+      if (vals && vals.length > 0) {
+        if (typeof vals[0] === "object") {
+          vals.map((item) => {
+            const scrollId = this.getId();
+            item.fui_s_id = scrollId;
+          });
+        } else {
+          vals = vals.map((item) => {
+            const scrollId = this.getId();
+            return {
+              [this.nameKey]: item,
+              fui_s_id: scrollId
+            };
+          });
+        }
+        this.vals = vals;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.switchTab(this.current);
+          }, 50);
+        });
+      }
+    },
+    switchTab(index) {
+      const item = {
+        ...this.vals[index]
+      };
+      if (this.tabIndex === index || item[this.disabledKey])
+        return;
+      this.tabIndex = index;
+      let scrollIndex = index - 1 < 0 ? 0 : index - 1;
+      this.scrollInto = this.vals[scrollIndex].fui_s_id;
+      delete item.fui_s_id;
+      this.$emit("change", {
+        index,
+        ...item
+      });
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.f($data.vals, (tab, index, i0) => {
+      return common_vendor.e($props.isSlider ? {
+        a: $props.short ? 1 : "",
+        b: !$props.short ? 1 : "",
+        c: !$options.getSliderBgColor ? 1 : "",
+        d: $props.sliderHeight + "rpx",
+        e: $options.getSliderBgColor,
+        f: $props.sliderRadius == -1 ? $props.sliderHeight + "rpx" : $props.sliderRadius + "rpx",
+        g: `scale(${$data.tabIndex === index ? $data.isNvue ? 1 : $props.scale : $data.isNvue ? 1e-5 : 0})`,
+        h: $props.center ? 1 : "",
+        i: $props.bottom + "rpx",
+        j: `-${$props.padding}rpx`,
+        k: `-${$props.padding}rpx`
+      } : {}, {
+        l: tab.icon
+      }, tab.icon ? {
+        m: $props.direction === "column" ? 1 : "",
+        n: $data.tabIndex === index && tab.selectedIcon ? tab.selectedIcon : tab.icon
+      } : {}, {
+        o: common_vendor.t(tab[$props.nameKey]),
+        p: tab[$props.badgeKey]
+      }, tab[$props.badgeKey] ? {
+        q: common_vendor.t($props.isDot ? "" : tab[$props.badgeKey]),
+        r: !$options.getBadgeBgColor ? 1 : "",
+        s: $props.isDot ? 1 : "",
+        t: !$props.isDot ? 1 : "",
+        v: $props.badgeColor,
+        w: $options.getBadgeBgColor
+      } : {}, {
+        x: !$options.getSelectedColor && $data.tabIndex === index ? 1 : "",
+        y: !$props.color && $data.tabIndex !== index ? 1 : "",
+        z: ($data.tabIndex === index && $data.isNvue ? $props.selectedSize : $props.size) + "rpx",
+        A: $data.tabIndex === index ? $options.getSelectedColor : $props.color,
+        B: $data.tabIndex === index ? $props.selectedFontWeight : $props.fontWeight,
+        C: `scale(${$data.tabIndex === index && !$data.isNvue ? $props.scale : 1})`,
+        D: tab[$props.disabledKey] ? 1 : "",
+        E: $props.direction === "column" && tab.icon ? 1 : "",
+        F: index,
+        G: tab.fui_s_id,
+        H: common_vendor.o(($event) => $options.switchTab(index), index)
+      });
+    }),
+    b: $props.isSlider,
+    c: $props.height + "rpx",
+    d: !$props.alignLeft ? 1 : "",
+    e: $props.itemPadding + "rpx",
+    f: $props.itemPadding + "rpx",
+    g: !$props.alignLeft ? 1 : "",
+    h: $props.isFixed && !$props.isSticky ? 1 : "",
+    i: $props.isSticky ? 1 : "",
+    j: $props.scroll,
+    k: $data.scrollInto,
+    l: $props.background,
+    m: $props.isFixed || $props.isSticky ? $props.zIndex : 1,
+    n: $props.isFixed || $props.isSticky ? $props.top + "px" : "auto"
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e6d1c91f"]]);
+wx.createComponent(Component);

dist/dev/mp-weixin/components/firstui/fui-tabs/fui-tabs.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

dist/dev/mp-weixin/components/firstui/fui-tabs/fui-tabs.wxml

@@ -0,0 +1 @@
+<scroll-view class="{{['fui-tabs__scrollbox', 'data-v-e6d1c91f', h && 'fui-tabs__fixed', i && 'fui-tabs__sticky', virtualHostClass]}}" scroll-with-animation="{{true}}" scroll-x="{{j}}" show-scrollbar="{{false}}" scroll-into-view="{{k}}" style="{{'background:' + l + ';' + ('z-index:' + m) + ';' + ('top:' + n) + ';' + virtualHostStyle}}"><view class="{{['fui-scroll__view', 'data-v-e6d1c91f', g && 'fui-tabs__full']}}"><view wx:for="{{a}}" wx:for-item="tab" wx:key="F" class="{{['fui-tabs__item', 'data-v-e6d1c91f', d && 'fui-tabs__full']}}" style="{{'padding-left:' + e + ';' + ('padding-right:' + f)}}" id="{{tab.G}}" bindtap="{{tab.H}}"><view class="{{['fui-tabs__text-wrap', 'data-v-e6d1c91f', tab.D && 'fui-tabs__wrap-disabled', tab.E && 'fui-tabs__item-column']}}" style="{{'height:' + c}}"><view wx:if="{{b}}" class="{{['fui-tabs__line-wrap', 'data-v-e6d1c91f', tab.h && 'fui-tabs__line-center']}}" style="{{'bottom:' + tab.i + ';' + ('left:' + tab.j) + ';' + ('right:' + tab.k)}}"><view class="{{['fui-tabs__ac-line', 'data-v-e6d1c91f', tab.a && 'fui-tabs__line-short', tab.b && 'fui-tabs__full', tab.c && 'fui-tabs__slider-color']}}" style="{{'height:' + tab.d + ';' + ('background:' + tab.e) + ';' + ('border-radius:' + tab.f) + ';' + ('transform:' + tab.g)}}"></view></view><image wx:if="{{tab.l}}" class="{{['fui-tabs__icon', 'data-v-e6d1c91f', tab.m && 'fui-tabs__icon-column']}}" src="{{tab.n}}"></image><view class="{{['fui-tabs__text', 'data-v-e6d1c91f', tab.x && 'fui-tabs__selected-color', tab.y && 'fui-tabs__text-color']}}" style="{{'font-size:' + tab.z + ';' + ('color:' + tab.A) + ';' + ('font-weight:' + tab.B) + ';' + ('transform:' + tab.C)}}">{{tab.o}}<text wx:if="{{tab.p}}" class="{{['data-v-e6d1c91f', tab.r && 'fui-tabs__badge-color', tab.s && 'fui-tabs__badge-dot', tab.t && 'fui-tabs__badge']}}" style="{{'color:' + tab.v + ';' + ('background:' + tab.w)}}">{{tab.q}}</text></view></view></view></view></scroll-view>

dist/dev/mp-weixin/components/firstui/fui-tabs/fui-tabs.wxss

@@ -0,0 +1,165 @@
+
+.data-v-e6d1c91f::-webkit-scrollbar {
+		width: 0 !important;
+		height: 0 !important;
+		color: transparent !important;
+		display: none;
+}
+.fui-tabs__scrollbox.data-v-e6d1c91f {
+
+		width: 100%;
+
+		flex: 1;
+		flex-direction: row;
+		overflow: hidden;
+}
+.fui-tabs__fixed.data-v-e6d1c91f {
+		position: fixed;
+		left: 0;
+		right: 0;
+}
+.fui-tabs__sticky.data-v-e6d1c91f {
+		position: sticky;
+		left: 0;
+		right: 0;
+}
+.fui-scroll__view.data-v-e6d1c91f {
+
+		min-width: 100%;
+		white-space: nowrap;
+		display: flex;
+
+		flex-direction: row;
+		align-items: center;
+}
+.fui-tabs__item.data-v-e6d1c91f {
+
+		display: flex;
+		flex-shrink: 0;
+
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+}
+.fui-tabs__full.data-v-e6d1c91f {
+		flex: 1;
+}
+.fui-tabs__text-wrap.data-v-e6d1c91f {
+		position: relative;
+
+		display: flex;
+
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+
+
+
+		z-index: 3;
+}
+.fui-tabs__wrap-disabled.data-v-e6d1c91f {
+
+
+
+		opacity: 0.5;
+}
+.fui-tabs__icon.data-v-e6d1c91f {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 12rpx;
+}
+.fui-tabs__item-column.data-v-e6d1c91f {
+		flex-direction: column !important;
+}
+.fui-tabs__icon-column.data-v-e6d1c91f {
+		margin-right: 0 !important;
+		margin-bottom: 8rpx;
+}
+.fui-tabs__text.data-v-e6d1c91f {
+
+		white-space: nowrap;
+		display: block;
+		transition: transform 0.2s linear;
+		z-index: 3;
+
+
+
+
+
+
+
+		position: relative;
+}
+.fui-tabs__badge.data-v-e6d1c91f {
+		height: 36rpx;
+		padding: 0 12rpx;
+		color: #FFFFFF;
+		font-size: 24rpx;
+		line-height: 36rpx;
+		border-radius: 100px;
+		position: absolute;
+
+		min-width: 36rpx !important;
+		display: flex;
+		box-sizing: border-box;
+		right: -32rpx;
+		top: -18rpx;
+		z-index: 10;
+
+
+
+
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		transform: scale(0.9);
+}
+.fui-tabs__badge-dot.data-v-e6d1c91f {
+		height: 8px !important;
+		width: 8px !important;
+
+
+
+		position: absolute;
+
+		display: inline-block;
+		right: -6px;
+		top: -3px;
+		border-radius: 50%;
+		z-index: 10;
+}
+.fui-tabs__line-wrap.data-v-e6d1c91f {
+		position: absolute;
+		border-radius: 2px;
+		z-index: 2;
+		flex: 1;
+
+		display: flex;
+
+		flex-direction: row;
+}
+.fui-tabs__line-center.data-v-e6d1c91f {
+		justify-content: center;
+		left: 0;
+}
+.fui-tabs__ac-line.data-v-e6d1c91f {
+		transition: transform 0.2s linear;
+}
+.fui-tabs__line-short.data-v-e6d1c91f {
+		width: 45rpx !important;
+}
+.fui-tabs__selected-color.data-v-e6d1c91f {
+		color: var(--fui-color-primary, #465CFF) !important;
+}
+.fui-tabs__text-color.data-v-e6d1c91f {
+		color: var(--fui-color-subtitle, #7F7F7F) !important;
+}
+.fui-tabs__slider-color.data-v-e6d1c91f {
+		background: var(--fui-color-primary, #465CFF) !important;
+}
+.fui-tabs__badge-color.data-v-e6d1c91f {
+		background: var(--fui-color-danger, #FF2B2B) !important;
+}
+
+