hw-cus-ui 1.1.0 → 1.1.1

package/HwTabs/HwTabs.vue

@@ -0,0 +1,332 @@
+<template>
+   <view class="v-tabs">
+      <scroll-view
+         :id="getDomId"
+         :scroll-x="scroll"
+         :scroll-left="scroll ? scrollLeft : 0"
+         :scroll-with-animation="scroll"
+         :style="{
+            position: fixed ? 'fixed' : 'relative',
+            zIndex,
+            width: '100%'
+         }"
+      >
+         <view
+            class="v-tabs__container"
+            :style="{
+               display: scroll ? 'inline-flex' : 'flex',
+               whiteSpace: scroll ? 'nowrap' : 'normal',
+               background: bgColor,
+               height,
+               padding
+            }"
+         >
+            <view
+               :class="[
+                  'v-tabs__container-item',
+                  { disabled: !!v.disabled },
+                  { active: current == i }
+               ]"
+               v-for="(v, i) in tabs"
+               :key="i"
+               :style="{
+                  color: current == i ? activeColor : color,
+                  fontSize: current == i ? fontSize : fontSize,
+                  fontWeight: bold && current == i ? 'bold' : '',
+                  justifyContent: !scroll ? 'center' : '',
+                  flex: scroll ? '' : 1,
+                  padding: paddingItem
+               }"
+               @click="change(i)"
+            >
+               <slot :row="v" :index="i">{{ field ? v[field] : v }}</slot>
+               <view class="num" v-if="v.num && v.num > 0">{{ v.num }}</view>
+            </view>
+            <template v-if="!!tabs.length">
+               <view
+                  v-if="!pills"
+                  :class="[
+                     'v-tabs__container-line',
+                     { animation: lineAnimation }
+                  ]"
+                  :style="{
+                     background: lineColor,
+                     width: lineWidth + 'px',
+                     height: lineHeight,
+                     borderRadius: lineRadius,
+                     transform: `translate3d(${lineLeft}px, 0, 0)`
+                  }"
+               />
+               <view
+                  v-else
+                  :class="[
+                     'v-tabs__container-pills',
+                     { animation: lineAnimation }
+                  ]"
+                  :style="{
+                     background: pillsColor,
+                     borderRadius: pillsBorderRadius,
+                     width: currentWidth + 'px',
+                     transform: `translate3d(${pillsLeft}px, 0, 0)`,
+                     height
+                  }"
+               />
+            </template>
+         </view>
+      </scroll-view>
+      <!-- fixed 的站位高度 -->
+      <view
+         class="v-tabs__placeholder"
+         :style="{ height: fixed ? height : '0', padding }"
+      ></view>
+   </view>
+</template>
+
+<script>
+import { startMicroTask, throttle } from './utils'
+import props from './props'
+/**
+ * v-tabs
+ * @property {Number} value 选中的下标
+ * @property {Array} tabs tabs 列表
+ * @property {String} bgColor = '#fff' 背景颜色
+ * @property {String} color = '#333' 默认颜色
+ * @property {String} activeColor = '#2979ff' 选中文字颜色
+ * @property {String} fontSize = '28rpx' 默认文字大小
+ * @property {String} activeFontSize = '28rpx' 选中文字大小
+ * @property {Boolean} bold = [true | false] 选中文字是否加粗
+ * @property {Boolean} scroll = [true | false] 是否滚动
+ * @property {String} height = '60rpx' tab 的高度
+ * @property {String} lineHeight = '10rpx' 下划线的高度
+ * @property {String} lineColor = '#2979ff' 下划线的颜色
+ * @property {Number} lineScale = 0.5 下划线的宽度缩放比例
+ * @property {String} lineRadius = '10rpx' 下划线圆角
+ * @property {Boolean} pills = [true | false] 是否胶囊样式
+ * @property {String} pillsColor = '#2979ff' 胶囊背景色
+ * @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
+ * @property {String} field 如果是对象，显示的键名
+ * @property {Boolean} fixed = [true | false] 是否固定
+ * @property {String} paddingItem = '0 22rpx' 选项的边距
+ * @property {Boolean} lineAnimation = [true | false] 下划线是否有动画
+ * @property {Number} zIndex = 1993 默认层级
+ *
+ * @event {Function(current)} change 改变标签触发
+ */
+export default {
+  name: 'VTabs',
+  props,
+  // #ifdef VUE3
+  emits: ['update:modelValue', 'change'],
+  // #endif
+  data() {
+    return {
+      lineWidth: 30,
+      currentWidth: 0, // 当前选项的宽度
+      lineLeft: 0, // 滑块距离左侧的位置
+      pillsLeft: 0, // 胶囊距离左侧的位置
+      scrollLeft: 0, // 距离左边的位置
+      container: { width: 0, height: 0, left: 0, right: 0 }, // 容器的宽高，左右距离
+      current: 0, // 当前选中项
+      scrollWidth: 0 // 可以滚动的宽度
+    }
+  },
+  computed: {
+    getDomId() {
+      const len = 16
+      const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+      const maxPos = $chars.length
+      let pwd = ''
+      for (let i = 0; i < len; i++) {
+        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
+      }
+      return `xfjpeter_${pwd}`
+    }
+  },
+  watch: {
+    // #ifdef VUE3
+    modelValue: {
+    // #endif
+    // #ifdef VUE2
+    value: {
+    // #endif
+      immediate: true,
+      handler(newVal) {
+        this.current = newVal > -1 && newVal < this.tabs.length ? newVal : 0
+        this.$nextTick(this.update)
+      }
+    }
+  },
+  methods: {
+    // 切换事件
+    change: throttle(function(index) {
+      const isDisabled = !!this.tabs[index].disabled
+      if (this.current !== index && !isDisabled) {
+        this.current = index
+        // #ifdef VUE3
+        this.$emit('update:modelValue', index)
+        // #endif
+        // #ifdef VUE2
+        this.$emit('input', index)
+        // #endif
+        this.$emit('change', index)
+      }
+    }, 300),
+    createQueryHandler() {
+      let query
+      // #ifndef MP-ALIPAY
+      query = uni.createSelectorQuery().in(this)
+      // #endif
+      // #ifdef MP-ALIPAY
+      query = uni.createSelectorQuery()
+      // #endif
+
+      return query
+    },
+    update() {
+      const _this = this
+      startMicroTask(() => {
+        // 没有列表的时候，不执行
+        if (!this.tabs.length) return
+        _this
+          .createQueryHandler()
+          .select(`#${this.getDomId}`)
+          .boundingClientRect(data => {
+            const { width, height, left, right } = data || {}
+            // 获取容器的相关属性
+            this.container = { width, height, left, right: right - width }
+            _this.calcScrollWidth()
+            _this.setScrollLeft()
+            _this.setLine()
+          })
+          .exec()
+      })
+    },
+    // 计算可以滚动的宽度
+    calcScrollWidth(callback) {
+      const view = this.createQueryHandler().select(`#${this.getDomId}`)
+      view.fields({ scrollOffset: true })
+      view
+        .scrollOffset(res => {
+          if (typeof callback === 'function') {
+            callback(res)
+          } else {
+            // 获取滚动条的宽度
+            this.scrollWidth = res.scrollWidth
+          }
+        })
+        .exec()
+    },
+    // 设置滚动条滚动的进度
+    setScrollLeft() {
+      this.calcScrollWidth(res => {
+        // 动态读取 scrollLeft
+        let scrollLeft = res.scrollLeft
+        this.createQueryHandler()
+          .select(`#${this.getDomId} .v-tabs__container-item.active`)
+          .boundingClientRect(data => {
+            if (!data) return
+            // 除开当前选项外容器的一半宽度
+            let curHalfWidth = (this.container.width - data.width) / 2
+            let scrollDiff = this.scrollWidth - this.container.width
+            // 在原有滚动条的基础上 + (当前元素距离左侧的距离 - 计算的一半宽度) - 容器的外边距之类的
+            scrollLeft += data.left - curHalfWidth - this.container.left
+            // 已经滚动在左侧了
+            if (scrollLeft < 0) scrollLeft = 0
+            // 已经超出右侧了
+            else if (scrollLeft > scrollDiff) scrollLeft = scrollDiff
+            this.scrollLeft = scrollLeft
+          })
+          .exec()
+      })
+    },
+    setLine() {
+      this.calcScrollWidth(res => {
+        const scrollLeft = res.scrollLeft
+        this.createQueryHandler()
+          .select(`#${this.getDomId} .v-tabs__container-item.active`)
+          .boundingClientRect(data => {
+            if (!data) return
+            if (this.pills) {
+              this.currentWidth = data.width
+              this.pillsLeft = scrollLeft + data.left - this.container.left
+            } else {
+              this.lineWidth = data.width * this.lineScale
+              this.lineLeft = scrollLeft + data.left + (data.width - data.width * this.lineScale) / 2 - this.container.left
+            }
+          })
+          .exec()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-tabs {
+   width: 100%;
+   box-sizing: border-box;
+   overflow: hidden;
+
+   /* #ifdef H5 */
+   ::-webkit-scrollbar {
+      display: none;
+   }
+   /* #endif */
+
+   &__container {
+      min-width: 100%;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &-item {
+         flex-shrink: 0;
+         display: flex;
+         align-items: center;
+         height: 100%;
+         position: relative;
+         z-index: 10;
+         transition: all 0.3s;
+         white-space: nowrap;
+         .num {
+            position: absolute;
+            right: 0;
+            top: 0;
+            min-width: 40rpx;
+            min-height: 40rpx;
+            background: rgba(255, 82, 25, 1);
+            font-size: 24rpx;
+            color: #ffffff;
+            text-align: center;
+            line-height: 40rpx;
+            border-radius: 50%;
+         }
+
+         &.disabled {
+            opacity: 0.5;
+            color: #999;
+         }
+      }
+
+      &-line {
+         position: absolute;
+         left: 0;
+         bottom: 0;
+      }
+
+      &-pills {
+         position: absolute;
+         z-index: 9;
+      }
+
+      &-line,
+      &-pills {
+         &.animation {
+            transition: all 0.3s linear;
+         }
+      }
+   }
+}
+</style>

package/HwTabs/index.ts

@@ -0,0 +1,10 @@
+// index.ts
+import type { App } from 'vue';
+import HwTabs from './HwTabs.vue';
+
+// 使用install方法，在app.use挂载
+HwTabs.install = (app: App) => {
+  app.component(HwTabs.__name as string, HwTabs); //注册组件
+};
+
+export default HwTabs;

package/HwTabs/props.js

@@ -0,0 +1,100 @@
+export default {
+	value: {
+		type: Number,
+		default: 0
+	},
+	modelValue: {
+		type: Number,
+		default: 0
+	},
+	tabs: {
+		type: Array,
+		default () {
+			return []
+		}
+	},
+	bgColor: {
+		type: String,
+		default: '#fff'
+	},
+	padding: {
+		type: String,
+		default: '0'
+	},
+	color: {
+		type: String,
+		default: '#333'
+	},
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	fontSize: {
+		type: String,
+		default: '28rpx'
+	},
+	activeFontSize: {
+		type: String,
+		default: '32rpx'
+	},
+	bold: {
+		type: Boolean,
+		default: false
+	},
+	scroll: {
+		type: Boolean,
+		default: true
+	},
+	height: {
+		type: String,
+		default: '70rpx'
+	},
+	lineColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	lineHeight: {
+		type: [String, Number],
+		default: '10rpx'
+	},
+	lineScale: {
+		type: Number,
+		default: 0.3
+	},
+	lineRadius: {
+		type: String,
+		default: '10rpx'
+	},
+	pills: {
+		type: Boolean,
+		default: false
+	},
+	pillsColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	pillsBorderRadius: {
+		type: String,
+		default: '10rpx'
+	},
+	field: {
+		type: String,
+		default: ''
+	},
+	fixed: {
+		type: Boolean,
+		default: false
+	},
+	paddingItem: {
+		type: String,
+		default: '0 22rpx'
+	},
+	lineAnimation: {
+		type: Boolean,
+		default: true
+	},
+	zIndex: {
+		type: Number,
+		default: 1993
+	}
+}