hy-app 0.2.13 → 0.2.15

package/components/hy-tabs/hy-tabs.vue

@@ -23,77 +23,38 @@
                 'hy-tabs__wrapper__nav__item',
                 `hy-tabs__wrapper__nav__item-${index}`,
                 item.disabled && 'hy-tabs__wrapper__nav__item--disabled',
-                innerCurrent == index
-                  ? 'hy-tabs__wrapper__nav__item--active'
-                  : '',
+                innerCurrent == index ? 'hy-tabs__wrapper__nav__item--active' : '',
               ]"
             >
-              <slot
-                v-if="$slots.icon"
-                name="icon"
-                :record="item"
-                :index="index"
-              />
+              <slot v-if="$slots.icon" name="icon" :record="item" :index="index" />
               <template v-else>
-                <view
-                  class="hy-tabs__wrapper__nav__item__prefix-icon"
-                  v-if="item.icon"
-                >
+                <view class="hy-tabs__wrapper__nav__item__prefix-icon" v-if="item.icon">
                   <HyIcon :name="item.icon" :customStyle="iconStyle"></HyIcon>
                 </view>
               </template>
-              <slot
-                v-if="$slots.content"
-                name="content"
-                :record="item"
-                :index="index"
-              />
+              <slot v-if="$slots.content" name="content" :record="item" :index="index" />
               <text
                 v-else
-                :class="[
-                  item.disabled &&
-                    'hy-tabs__wrapper__nav__item__text--disabled',
-                ]"
+                :class="[item.disabled && 'hy-tabs__wrapper__nav__item__text--disabled']"
                 class="hy-tabs__wrapper__nav__item--text"
                 :style="[textStyle(index)]"
-                >{{ item[keyName] }}</text
               >
+                {{ item[keyName] }}
+              </text>
               <HyBadge
                 :show="
-                  !!(
-                    item?.badge &&
-                    (item?.badge?.show ||
-                      item?.badge?.isDot ||
-                      item?.badge?.value)
-                  )
-                "
-                :isDot="
-                  (item?.badge && item?.badge?.isDot) || propsBadge?.isDot
-                "
-                :value="
-                  (item?.badge && item?.badge?.value) || propsBadge?.value
+                  !!(item?.badge && (item?.badge?.show || item?.badge?.isDot || item?.badge?.value))
                 "
+                :isDot="(item?.badge && item?.badge?.isDot) || propsBadge?.isDot"
+                :value="(item?.badge && item?.badge?.value) || propsBadge?.value"
                 :max="(item?.badge && item?.badge?.max) || propsBadge?.max"
                 :type="(item?.badge && item?.badge?.type) || propsBadge?.type"
-                :showZero="
-                  (item?.badge && item?.badge?.showZero) || propsBadge?.showZero
-                "
-                :bgColor="
-                  (item?.badge && item?.badge?.bgColor) || propsBadge?.bgColor
-                "
-                :color="
-                  (item?.badge && item?.badge?.color) || propsBadge?.color
-                "
-                :shape="
-                  (item?.badge && item?.badge?.shape) || propsBadge?.shape
-                "
-                :numberType="
-                  (item?.badge && item?.badge?.numberType) ||
-                  propsBadge?.numberType
-                "
-                :inverted="
-                  (item?.badge && item?.badge?.inverted) || propsBadge?.inverted
-                "
+                :showZero="(item?.badge && item?.badge?.showZero) || propsBadge?.showZero"
+                :bgColor="(item?.badge && item?.badge?.bgColor) || propsBadge?.bgColor"
+                :color="(item?.badge && item?.badge?.color) || propsBadge?.color"
+                :shape="(item?.badge && item?.badge?.shape) || propsBadge?.shape"
+                :numberType="(item?.badge && item?.badge?.numberType) || propsBadge?.numberType"
+                :inverted="(item?.badge && item?.badge?.inverted) || propsBadge?.inverted"
                 :customStyle="{
                   marginLeft: '4px',
                 }"
@@ -113,8 +74,7 @@
                   backgroundSize: lineBgSize,
                 },
               ]"
-            >
-            </view>
+            ></view>
             <!-- #endif -->
           </view>
         </scroll-view>
@@ -125,9 +85,9 @@
     <!-- 内容轮播图	-->
     <slot name="main">
       <swiper
-          :current="innerCurrent"
-          @animationfinish="animationFinish"
-          :style="{ height: swiperHeight }"
+        :current="innerCurrent"
+        @animationfinish="animationFinish"
+        :style="{ height: swiperHeight }"
       >
         <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
           <slot :record="item.content" />
@@ -138,13 +98,18 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+ * @displayName hy-tabs
+ */
+defineOptions({})
 export default {
   name: 'hy-tabs',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -156,151 +121,197 @@ import {
   ref,
   watch,
   nextTick,
-  onMounted, getCurrentInstance,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import type { TabsItemVo } from "./typing";
-import { addUnit, getPx, getRect, sleep } from "../../utils";
+  onMounted,
+  getCurrentInstance,
+  PropType,
+} from 'vue'
+import type { ITabsEmits } from './typing'
+import type { TabsItemVo } from './typing'
+import { addUnit, getPx, getRect, sleep } from '../../utils'
 
 // 组件
-import HyBadge from "../hy-badge/hy-badge.vue";
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyBadge from '../hy-badge/hy-badge.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
 
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 标签数组，元素为对象，如[{name: '推荐'}] */
+  list: {
+    type: Array as unknown as PropType<TabsItemVo[]>,
+    default: [],
+  },
+  /** 当前选中标签的索引 */
+  current: {
+    type: Number,
+    default: 0,
+  },
+  /** 从list元素对象中读取的键名 */
+  keyName: {
+    type: Number,
+    default: 'name',
+  },
+  /** 滑块移动一次所需的时间，单位秒 */
+  duration: {
+    type: Number,
+    default: 300,
+  },
+  /** 滑块颜色 */
+  lineColor: String,
+  /** 菜单选择中时的样式 */
+  activeStyle: Object as PropType<CSSProperties>,
+  /** 菜单非选中时的样式 */
+  inactiveStyle: Object as PropType<CSSProperties>,
+  /** 滑块长度 */
+  lineWidth: {
+    type: [String, Number],
+    default: 20,
+  },
+  /** 滑块高度 */
+  lineHeight: {
+    type: [String, Number],
+    default: 3,
+  },
+  /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
+  lineBgSize: {
+    type: [String, Number],
+    default: 'cover',
+  },
+  /** 菜单item的样式 */
+  itemStyle: Object as PropType<CSSProperties>,
+  /** 轮播图高度 */
+  swiperHeight: {
+    type: [String, Number],
+    default: 'calc(100vh - 44px)',
+  },
+  /** 菜单是否可滚动 */
+  scrollable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 标签左侧图标样式自定义 */
+  iconStyle: Object as PropType<CSSProperties>,
+})
+const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props)
+const emit = defineEmits<ITabsEmits>()
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props);
-const emit = defineEmits(["click", "longPress", "update:current", "change"]);
-
-const instance = getCurrentInstance();
-const firstTime = ref<boolean>(true);
-const scrollLeft = ref<number>(0);
-const scrollViewWidth = ref<number>(0);
-const lineOffsetLeft = ref<number>(0);
+const instance = getCurrentInstance()
+const firstTime = ref<boolean>(true)
+const scrollLeft = ref<number>(0)
+const scrollViewWidth = ref<number>(0)
+const lineOffsetLeft = ref<number>(0)
 const tabsRect = ref<UniApp.NodeInfo>({
   left: 0,
-});
-const innerCurrent = ref<number>(0);
+})
+const innerCurrent = ref<number>(0)
 
 watch(
   () => current.value,
   (newValue: number) => {
     // 内外部值不相等时，才尝试移动滑块
     if (newValue !== innerCurrent.value) {
-      innerCurrent.value = newValue;
+      innerCurrent.value = newValue
       nextTick(() => {
-        resize();
-      });
+        resize()
+      })
     }
   },
   { immediate: true },
-);
+)
 watch(
   () => list.value,
   () => resize(),
-);
+)
 
 const textStyle = computed(() => {
   return (index: number): CSSProperties => {
-    const style: CSSProperties = {};
+    const style: CSSProperties = {}
     // 取当期是否激活的样式
-    const customStyle =
-      index == innerCurrent.value ? activeStyle.value : inactiveStyle.value;
+    const customStyle = index == innerCurrent.value ? activeStyle.value : inactiveStyle.value
     // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
     if (list.value[index]?.disabled) {
-      style.color = "#c8c9cc";
+      style.color = '#c8c9cc'
     }
-    return Object.assign(customStyle, style);
-  };
-});
+    return Object.assign(customStyle, style)
+  }
+})
 
 onMounted(() => {
-  resize();
-});
+  resize()
+})
 
 /**
  * @description 设置线左边距离
  */
 const setLineLeft = () => {
-  const tabItem = list.value[innerCurrent.value];
+  const tabItem = list.value[innerCurrent.value]
   if (!tabItem) {
-    return;
+    return
   }
   // 获取滑块该移动的位置
   let lineOffsetLeft_1 = list.value
     .slice(0, innerCurrent.value)
-    .reduce((total, curr) => total + curr.rect.width, 0);
+    .reduce((total, curr) => total + curr.rect.width, 0)
   // 获取下划线的数值px表示法
-  lineOffsetLeft.value =
-    lineOffsetLeft_1 + (tabItem.rect.width - getPx(lineWidth.value)) / 2;
+  lineOffsetLeft.value = lineOffsetLeft_1 + (tabItem.rect.width - getPx(lineWidth.value)) / 2
 
   // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
   // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
   if (firstTime.value) {
     sleep().then(() => {
-      firstTime.value = false;
-    });
+      firstTime.value = false
+    })
   }
-};
+}
 // 点击某一个标签
 const clickHandler = (item: TabsItemVo, index: number) => {
   // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
-  emit(
-    "click",
-    {
-      ...item,
-      index,
-    },
+  emit('click', {
+    ...item,
     index,
-  );
+  })
   // 如果disabled状态，返回
-  if (item.disabled) return;
-  innerCurrent.value = index;
-  resize();
-  emit("update:current", index);
-  emit("change", item, index);
-};
+  if (item.disabled) return
+  innerCurrent.value = index
+  resize()
+  emit('update:current', index)
+  emit('change', item, index)
+}
 // 长按事件
 const longPressHandler = (item: TabsItemVo, index: number) => {
-  emit("longPress", {
+  emit('longPress', {
     ...item,
     index,
-  });
-};
+  })
+}
 const setScrollLeft = () => {
   // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
   if (innerCurrent.value < 0) {
-    innerCurrent.value = 0;
+    innerCurrent.value = 0
   }
-  const tabRect = list.value[innerCurrent.value];
+  const tabRect = list.value[innerCurrent.value]
   // 累加得到当前item到左边的距离
-  const offsetLeft = list.value
-    .slice(0, innerCurrent.value)
-    .reduce((total: number, curr) => {
-      return total + curr.rect.width;
-    }, 0);
+  const offsetLeft = list.value.slice(0, innerCurrent.value).reduce((total: number, curr) => {
+    return total + curr.rect.width
+  }, 0)
   // 此处为屏幕宽度
-  const windowWidth = uni.getWindowInfo().windowWidth;
+  const windowWidth = uni.getWindowInfo().windowWidth
   // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
   let scrollLeft_1 =
     offsetLeft -
     ((tabsRect.value.width || 0) - tabRect.rect.width) / 2 -
     (windowWidth - (tabsRect.value.right || 0)) / 2 +
-    (tabsRect.value.left || 0) / 2;
+    (tabsRect.value.left || 0) / 2
   // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
-  scrollLeft_1 = Math.min(
-    scrollLeft_1,
-    scrollViewWidth.value - (tabsRect.value.width || 0),
-  );
-  scrollLeft.value = Math.max(0, scrollLeft_1);
-};
+  scrollLeft_1 = Math.min(scrollLeft_1, scrollViewWidth.value - (tabsRect.value.width || 0))
+  scrollLeft.value = Math.max(0, scrollLeft_1)
+}
 /**
  * @description 获取所有标签的尺寸
  * */
 const resize = () => {
   // 如果不存在list，则不处理
   if (list.value.length === 0) {
-    return;
+    return
   }
   Promise.all([getTabsRect(), getAllItemRect()]).then(
     ([tabsRect_1, itemRect = []]: (UniApp.NodeInfo | any)[]) => {
@@ -312,33 +323,32 @@ const resize = () => {
         tabsRect_1.left > tabsRect_1.width
       ) {
         tabsRect_1.right =
-          tabsRect_1.right -
-          Math.floor(tabsRect_1.left / tabsRect_1.width) * tabsRect_1.width;
-        tabsRect_1.left = tabsRect_1.left % tabsRect_1.width;
+          tabsRect_1.right - Math.floor(tabsRect_1.left / tabsRect_1.width) * tabsRect_1.width
+        tabsRect_1.left = tabsRect_1.left % tabsRect_1.width
       }
       // console.log(tabsRect)
-      tabsRect.value = tabsRect_1;
-      scrollViewWidth.value = 0;
+      tabsRect.value = tabsRect_1
+      scrollViewWidth.value = 0
       itemRect.map((item: UniApp.NodeInfo, index: number) => {
         // 计算scroll-view的宽度，这里
-        scrollViewWidth.value += item.width || 0;
+        scrollViewWidth.value += item.width || 0
         // 另外计算每一个item的中心点X轴坐标
-        list.value[index].rect = item;
-      });
+        list.value[index].rect = item
+      })
       // 获取了tabs的尺寸之后，设置滑块的位置
-      setLineLeft();
-      setScrollLeft();
+      setLineLeft()
+      setScrollLeft()
     },
-  );
-};
+  )
+}
 /**
  * @description 获取导航菜单的尺寸
  * */
 const getTabsRect = () => {
   return new Promise((resolve) => {
-    getRect(".hy-tabs__wrapper__scroll-view", false, instance).then((size) => resolve(size));
-  });
-};
+    getRect('.hy-tabs__wrapper__scroll-view', false, instance).then((size) => resolve(size))
+  })
+}
 /**
  * @description 获取所有标签的尺寸
  * */
@@ -346,24 +356,24 @@ const getAllItemRect = () => {
   return new Promise((resolve) => {
     const promiseAllArr = list.value.map((item, index) =>
       getRect(`.hy-tabs__wrapper__nav__item-${index}`, false, instance),
-    );
-    Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
-  });
-};
+    )
+    Promise.all(promiseAllArr).then((sizes) => resolve(sizes))
+  })
+}
 
 /**
  * 滑动页面改变当前值
  * */
 const animationFinish = (e: any) => {
   // 轮播图选项值
-  innerCurrent.value = e.detail.current;
-  resize();
-  if (e.detail.source === "touch") {
-    emit("change", list.value[current.value], current.value);
+  innerCurrent.value = e.detail.current
+  resize()
+  if (e.detail.source === 'touch') {
+    emit('change', list.value[current.value], current.value)
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

package/components/hy-tabs/typing.d.ts

@@ -1,86 +1,100 @@
-import type { CSSProperties } from "vue";
-import BadgeProps from "../hy-badge/typing";
+import type { CSSProperties } from 'vue'
+import BadgeProps from '../hy-badge/typing'
 export interface TabsItemVo extends AnyObject {
   /**
    * @description tab名称
    * */
-  name: string;
+  name: string
   /**
    * @description 徽标接收的props
    * */
-  badge?: BadgeProps;
+  badge?: BadgeProps
   /**
    * @description 是否禁用
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description swiper内容值
    * */
-  content?: any;
+  content?: any
 }
 export default interface HyTabsProps {
   /**
    * @description 标签数组，元素为对象，如[{name: '推荐'}]
    * */
-  list: TabsItemVo[];
+  list: TabsItemVo[]
   /**
    * @description 当前选中标签的索引
    * */
-  current?: number;
+  current?: number
   /**
    * @description 从list元素对象中读取的键名
    * */
-  keyName?: string;
+  keyName?: string
   /**
    * @description 滑块移动一次所需的时间，单位秒（默认 200 ）
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 滑块颜色
    * */
-  lineColor?: string;
+  lineColor?: string
   /**
    * @description 菜单选择中时的样式
    * */
-  activeStyle?: CSSProperties;
+  activeStyle?: CSSProperties
   /**
    * @description 菜单非选中时的样式
    * */
-  inactiveStyle?: CSSProperties;
+  inactiveStyle?: CSSProperties
   /**
    * @description 滑块长度（默认20）
    * */
-  lineWidth?: number | string;
+  lineWidth?: number | string
   /**
    * @description 滑块高度（默认3）
    * */
-  lineHeight?: number | string;
+  lineHeight?: number | string
   /**
    * @description 滑块背景显示大小，当滑块背景设置为图片时使用
    * */
-  lineBgSize?: number | string;
+  lineBgSize?: number | string
   /**
    * @description 菜单item的样式
    * */
-  itemStyle?: CSSProperties;
+  itemStyle?: CSSProperties
   /**
    * @description 菜单是否可滚动
    * */
-  scrollable?: boolean;
+  scrollable?: boolean
   /**
    * @description 徽标props全局定义
    * */
-  propsBadge?: BadgeProps;
+  propsBadge?: BadgeProps
   /**
    * @description 轮播图高度
    * */
-  swiperHeight?: string | number;
+  swiperHeight?: string | number
   /**
    * @description 标签左侧图标样式自定义
    * */
-  iconStyle?: CSSProperties;
+  iconStyle?: CSSProperties
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface TabsParamsVo extends TabsParamsVo {
+  index: number
+}
+export interface ITabsEmits {
+  /** 点击标签时触发 */
+  (e: 'click', params: TabsParamsVo): void
+  /** 标签索引改变时触发 */
+  (e: 'change', item: TabsItemVo, index: number): void
+  /** 长按标签时触发 */
+  (e: 'longPress', params: TabsParamsVo): void
+  /** 标签索引改变时触发 */
+  (e: 'update:current', index: number): void
 }