hy-app 0.3.0 → 0.3.2

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

@@ -6,7 +6,7 @@
         <scroll-view
           :scroll-x="scrollable"
           :scroll-left="scrollLeft"
-          scroll-with-animation
+          :scroll-with-animation="true"
           class="hy-tabs__wrapper__scroll-view"
           :show-scrollbar="false"
           ref="hy-tabs__wrapper__scroll-view"
@@ -23,19 +23,37 @@
                 '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)]"
               >
@@ -43,18 +61,40 @@
               </text>
               <HyBadge
                 :show="
-                  !!(item?.badge && (item?.badge?.show || item?.badge?.isDot || item?.badge?.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
                 "
-                :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',
                 }"
@@ -99,32 +139,38 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-tabs',
+  name: "hy-tabs",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, nextTick, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ITabsEmits } from './typing'
-import type { TabsItemVo } from './typing'
-import type HyBadgeProps from '../hy-badge/typing'
-import { addUnit, getPx, getRect, sleep } from '../../utils'
-
+import {
+  computed,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  getCurrentInstance,
+} from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ITabsEmits } from "./typing";
+import type { TabsItemVo } from "./typing";
+import type HyBadgeProps from "../hy-badge/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";
 
 /**
  * 该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
  * @displayName hy-tabs
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -141,7 +187,7 @@ const props = defineProps({
   /** 从list元素对象中读取的键名 */
   keyName: {
     type: String,
-    default: 'name',
+    default: "name",
   },
   /** 滑块移动一次所需的时间，单位秒 */
   duration: {
@@ -173,14 +219,14 @@ const props = defineProps({
   /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
   lineBgSize: {
     type: [String, Number],
-    default: 'cover',
+    default: "cover",
   },
   /** 菜单item的样式 */
   itemStyle: Object as PropType<CSSProperties>,
   /** 轮播图高度 */
   swiperHeight: {
     type: [String, Number],
-    default: 'calc(100vh - 44px)',
+    default: "calc(100vh - 44px)",
   },
   /** 菜单是否可滚动 */
   scrollable: {
@@ -197,128 +243,134 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props)
-const emit = defineEmits<ITabsEmits>()
+});
+const emit = defineEmits<ITabsEmits>();
 
-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,
+  () => props.current,
   (newValue: number) => {
     // 内外部值不相等时，才尝试移动滑块
     if (newValue !== innerCurrent.value) {
-      innerCurrent.value = newValue
+      innerCurrent.value = newValue;
       nextTick(() => {
-        resize()
-      })
+        resize();
+      });
     }
   },
   { immediate: true },
-)
+);
 watch(
-  () => list.value,
+  () => props.list,
   () => resize(),
-)
+);
 
 const textStyle = computed(() => {
   return (index: number): CSSProperties => {
-    const style: CSSProperties = {}
+    const style: CSSProperties = {};
     // 取当期是否激活的样式
-    const customStyle_1 = index == innerCurrent.value ? activeStyle.value : inactiveStyle.value
+    const customStyle_1 =
+      index == innerCurrent.value ? props.activeStyle : props.inactiveStyle;
     // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
-    if (list.value[index]?.disabled) {
-      style.color = '#c8c9cc'
+    if (props.list[index]?.disabled) {
+      style.color = "#c8c9cc";
     }
-    return Object.assign(customStyle_1, style)
-  }
-})
+    return Object.assign(customStyle_1, style);
+  };
+});
 
 onMounted(() => {
-  resize()
-})
+  resize();
+});
 
 /**
  * @description 设置线左边距离
  */
 const setLineLeft = () => {
-  const tabItem = list.value[innerCurrent.value]
+  const tabItem = props.list[innerCurrent.value];
   if (!tabItem) {
-    return
+    return;
   }
   // 获取滑块该移动的位置
-  let lineOffsetLeft_1 = list.value
+  let lineOffsetLeft_1 = props.list
     .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(props.lineWidth)) / 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', {
+  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 = props.list[innerCurrent.value];
   // 累加得到当前item到左边的距离
-  const offsetLeft = list.value.slice(0, innerCurrent.value).reduce((total: number, curr) => {
-    return total + curr.rect.width
-  }, 0)
+  const offsetLeft = props.list
+    .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
+  if (props.list.length === 0) {
+    return;
   }
   Promise.all([getTabsRect(), getAllItemRect()]).then(
     ([tabsRect_1, itemRect = []]: (UniApp.NodeInfo | any)[]) => {
@@ -330,57 +382,60 @@ 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
-      })
+        props.list[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 获取所有标签的尺寸
  * */
 const getAllItemRect = () => {
   return new Promise((resolve) => {
-    const promiseAllArr = list.value.map((item, index) =>
+    const promiseAllArr = props.list.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", props.list[props.current], props.current);
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>