hy-app 0.1.1

package/components/hy-switch/props.ts

@@ -0,0 +1,16 @@
+import IProps from "./typing";
+import { ColorConfig } from "../../config";
+
+const defaultProps: IProps = {
+  modelValue: false,
+  loading: false,
+  disabled: false,
+  size: 25,
+  activeColor: ColorConfig.primary,
+  inactiveColor: "#ffffff",
+  activeValue: true,
+  inactiveValue: false,
+  asyncChange: false,
+  space: 0
+};
+export default defaultProps;

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

@@ -0,0 +1,48 @@
+import type { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 通过v-model双向绑定的值 （默认 false ）
+   * */
+  modelValue: boolean;
+  /**
+   * @description 是否处于加载中（默认 false ）
+   * */
+  loading?: boolean;
+  /**
+   * @description 是否禁用（默认 false ）
+   * */
+  disabled?: boolean;
+  /**
+   * @description 开关尺寸，单位px （默认 25 ）
+   * */
+  size?: number;
+  /**
+   * @description 打开时的背景色 （默认 '#2979ff' ）
+   * */
+  activeColor?: string;
+  /**
+   * @description 关闭时的背景色 （默认 '#ffffff' ）
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 打开选择器时通过change事件发出的值 （默认 true ）
+   * */
+  activeValue?: boolean;
+  /**
+   * @description 关闭选择器时通过change事件发出的值 （默认 false ）
+   * */
+  inactiveValue?: boolean;
+  /**
+   * @description 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+   * */
+  asyncChange?: boolean;
+  /**
+   * @description 圆点与外边框的距离 （默认 0 ）
+   * */
+  space?: number;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -0,0 +1,416 @@
+<template>
+  <view class="hy-tabs">
+    <view class="hy-tabs__wrapper">
+      <slot name="left" />
+      <view class="hy-tabs__wrapper__scroll-view-wrapper">
+        <scroll-view
+          :scroll-x="scrollable"
+          :scroll-left="scrollLeft"
+          scroll-with-animation
+          class="hy-tabs__wrapper__scroll-view"
+          :show-scrollbar="false"
+          ref="hy-tabs__wrapper__scroll-view"
+        >
+          <view class="hy-tabs__wrapper__nav" ref="hy-tabs__wrapper__nav">
+            <view
+              v-for="(item, index) in list"
+              :key="index"
+              @tap="clickHandler(item, index)"
+              @longpress="longPressHandler(item, index)"
+              :ref="`u-tabs__wrapper__nav__item-${index}`"
+              :style="[itemStyle, { flex: scrollable ? '' : 1 }]"
+              :class="[
+                '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'
+                  : ''
+              ]"
+            >
+              <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"
+                >
+                  <HyIcon :name="item.icon" :customStyle="iconStyle"></HyIcon>
+                </view>
+              </template>
+              <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="hy-tabs__wrapper__nav__item__text"
+                :style="[textStyle(index)]"
+                >{{ 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
+                "
+                :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
+                "
+                :customStyle="{
+                  marginLeft: '4px'
+                }"
+              ></HyBadge>
+            </view>
+            <!-- #ifndef APP-NVUE -->
+            <view
+              class="hy-tabs__wrapper__nav__line"
+              ref="hy-tabs__wrapper__nav__line"
+              :style="[
+                {
+                  width: addUnit(lineWidth),
+                  transform: `translate(${lineOffsetLeft}px)`,
+                  transitionDuration: `${firstTime ? 0 : duration}ms`,
+                  height: addUnit(lineHeight),
+                  background: lineColor,
+                  backgroundSize: lineBgSize
+                }
+              ]"
+            >
+            </view>
+            <!-- #endif -->
+          </view>
+        </scroll-view>
+      </view>
+      <slot name="right" />
+    </view>
+  </view>
+
+  <!-- 内容轮播图	-->
+  <slot name="main">
+    <swiper
+      :current="innerCurrent"
+      @animationfinish="animationFinish"
+      :style="{ height: swiperHeight }"
+    >
+      <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
+        <slot :record="item.content" />
+      </swiper-item>
+    </swiper>
+  </slot>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  CSSProperties,
+  toRefs,
+  ref,
+  watch,
+  nextTick,
+  onMounted
+} from "vue";
+import defaultProps from "./props";
+import IProps, { 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";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { list, current, activeStyle, lineWidth, inactiveStyle } = toRefs(props);
+const emit = defineEmits(["click", "longPress", "update:current", "change"]);
+
+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);
+
+watch(
+  () => current.value,
+  (newValue: number) => {
+    // 内外部值不相等时，才尝试移动滑块
+    if (newValue !== innerCurrent.value) {
+      innerCurrent.value = newValue;
+      nextTick(() => {
+        resize();
+      });
+    }
+  },
+  { immediate: true }
+);
+watch(
+  () => list.value,
+  () => resize()
+);
+
+const textStyle = computed(() => {
+  return (index: number): CSSProperties => {
+    const style: CSSProperties = {};
+    // 取当期是否激活的样式
+    const customStyle =
+      index == innerCurrent.value ? activeStyle.value : inactiveStyle.value;
+    // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+    if (list.value[index]?.disabled) {
+      style.color = "#c8c9cc";
+    }
+    return Object.assign(customStyle, style);
+  };
+});
+
+onMounted(() => {
+  resize();
+});
+
+/**
+ * @description 设置线左边距离
+ */
+const setLineLeft = () => {
+  const tabItem = list.value[innerCurrent.value];
+  if (!tabItem) {
+    return;
+  }
+  // 获取滑块该移动的位置
+  let lineOffsetLeft_1 = list.value
+    .slice(0, innerCurrent.value)
+    .reduce((total, curr) => total + curr.rect.width, 0);
+  // 获取下划线的数值px表示法
+  lineOffsetLeft.value =
+    lineOffsetLeft_1 + (tabItem.rect.width - getPx(lineWidth.value)) / 2;
+
+  // 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+  // 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+  if (firstTime.value) {
+    sleep().then(() => {
+      firstTime.value = false;
+    });
+  }
+};
+// 点击某一个标签
+const clickHandler = (item: TabsItemVo, index: number) => {
+  // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+  emit(
+    "click",
+    {
+      ...item,
+      index
+    },
+    index
+  );
+  // 如果disabled状态，返回
+  if (item.disabled) return;
+  innerCurrent.value = index;
+  resize();
+  emit("update:current", index);
+  emit("change", item, index);
+};
+// 长按事件
+const longPressHandler = (item: TabsItemVo, index: number) => {
+  emit("longPress", {
+    ...item,
+    index
+  });
+};
+const setScrollLeft = () => {
+  // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+  if (innerCurrent.value < 0) {
+    innerCurrent.value = 0;
+  }
+  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 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;
+  // 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+  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;
+  }
+  Promise.all([getTabsRect(), getAllItemRect()]).then(
+    ([tabsRect_1, itemRect = []]: (UniApp.NodeInfo | any)[]) => {
+      // 兼容在swiper组件中使用
+      if (
+        tabsRect_1.left &&
+        tabsRect_1.width &&
+        tabsRect_1.right &&
+        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;
+      }
+      // console.log(tabsRect)
+      tabsRect.value = tabsRect_1;
+      scrollViewWidth.value = 0;
+      itemRect.map((item: UniApp.NodeInfo, index: number) => {
+        // 计算scroll-view的宽度，这里
+        scrollViewWidth.value += item.width || 0;
+        // 另外计算每一个item的中心点X轴坐标
+        list.value[index].rect = item;
+      });
+      // 获取了tabs的尺寸之后，设置滑块的位置
+      setLineLeft();
+      setScrollLeft();
+    }
+  );
+};
+/**
+ * @description 获取导航菜单的尺寸
+ * */
+const getTabsRect = () => {
+  return new Promise((resolve) => {
+    getRect(".hy-tabs__wrapper__scroll-view").then((size) => resolve(size));
+  });
+};
+/**
+ * @description 获取所有标签的尺寸
+ * */
+const getAllItemRect = () => {
+  return new Promise((resolve) => {
+    const promiseAllArr = list.value.map((item, index) =>
+      getRect(`.hy-tabs__wrapper__nav__item-${index}`)
+    );
+    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);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-tabs {
+  &__wrapper {
+    @include flex;
+    align-items: center;
+
+    &__scroll-view-wrapper {
+      flex: 1;
+      /* #ifndef APP-NVUE */
+      overflow: auto hidden;
+      /* #endif */
+    }
+
+    &__scroll-view {
+      @include flex;
+      flex: 1;
+    }
+
+    &__nav {
+      @include flex;
+      position: relative;
+
+      &__item {
+        padding: 0 11px;
+        @include flex;
+        align-items: center;
+        justify-content: center;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
+
+        &--disabled {
+          /* #ifdef H5 */
+          cursor: not-allowed;
+          /* #endif */
+        }
+
+        &__text {
+          font-size: 15px;
+          color: $hy-text-color-grey;
+          white-space: nowrap !important;
+
+          &--disabled {
+            color: $hy-color-disable-bg !important;
+          }
+        }
+      }
+
+      &__line {
+        height: 3px;
+        background: $hy-primary;
+        width: 30px;
+        position: absolute;
+        bottom: 2px;
+        border-radius: 100px;
+        transition-property: transform;
+        transition-duration: 300ms;
+      }
+    }
+  }
+}
+</style>

package/components/hy-tabs/props.ts

@@ -0,0 +1,26 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: [],
+  current: 0,
+  keyName: "name",
+  duration: 300,
+  lineColor: "#3c9cff",
+  activeStyle: {
+    color: "#303133"
+  },
+  inactiveStyle: {
+    color: "#606266"
+  },
+  lineWidth: 20,
+  lineHeight: 3,
+  lineBgSize: "cover",
+  itemStyle: {
+    height: "44px"
+  },
+  swiperHeight: "calc(100vh - 44px)",
+  scrollable: true,
+  iconStyle: {}
+};
+
+export default defaultProps;

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

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