hy-app 0.1.1

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

@@ -0,0 +1,44 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description tab的数据
+   * */
+  list: (string | Record<string, string>)[];
+  /**
+   * @description 当前活动的tab的index（默认 0 ）
+   * */
+  current?: number;
+  /**
+   * @description 激活时的颜色（默认 '#3c9cff' ）
+   * */
+  activeColor?: string;
+  /**
+   * @description 未激活时的颜色（默认 '#303133' ）
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
+   * */
+  mode?: "button" | "subsection";
+  /**
+   * @description 字体大小，单位px（默认 12 ）
+   * */
+  fontSize?: number | string;
+  /**
+   * @description 激活选项的字体是否加粗（默认 true ）
+   * */
+  bold?: boolean;
+  /**
+   * @description 组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 从`list`元素对象中读取的键名（默认 'name' ）
+   * */
+  keyName?: string;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-swiper/hy-swiper-indicator.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="hy-swiper-indicator">
+    <view
+      v-if="indicatorMode === 'line'"
+      :class="[
+        'hy-swiper-indicator__wrapper',
+        `hy-swiper-indicator__wrapper--${indicatorMode}`
+      ]"
+      :style="{
+        width: addUnit(lineWidth * length),
+        backgroundColor: indicatorInactiveColor
+      }"
+    >
+      <view
+        class="hy-swiper-indicator__wrapper--line__bar"
+        :style="[lineStyle]"
+      ></view>
+    </view>
+    <view class="hy-swiper-indicator__wrapper" v-if="indicatorMode === 'dot'">
+      <view
+        class="hy-swiper-indicator__wrapper__dot"
+        v-for="(item, index) in length"
+        :key="index"
+        :class="[
+          index === current && 'hy-swiper-indicator__wrapper__dot--active'
+        ]"
+        :style="[dotStyle(index)]"
+      >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+// 指示器为线型的样式
+import { computed, type CSSProperties, toRefs, ref } from "vue";
+import { addUnit } from "../../utils";
+
+interface IProps {
+  length: number;
+  current: number | string;
+  indicatorActiveColor: string;
+  indicatorInactiveColor: string;
+  indicatorMode: "line" | "dot";
+}
+const props = withDefaults(defineProps<IProps>(), {});
+const { current, indicatorActiveColor, indicatorInactiveColor } = toRefs(props);
+
+const lineWidth = ref<number>(22);
+
+const lineStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  style.width = addUnit(lineWidth.value);
+  style.transform = `translateX(${addUnit(
+    Number(current.value) * lineWidth.value
+  )})`;
+  style.backgroundColor = indicatorActiveColor.value;
+  return style;
+});
+// 指示器为点型的样式
+const dotStyle = computed(() => {
+  return (index: number): CSSProperties => {
+    let style: CSSProperties = {};
+    style.backgroundColor =
+      index === current.value
+        ? indicatorActiveColor.value
+        : indicatorInactiveColor.value;
+    return style;
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-swiper-indicator {
+  &__wrapper {
+    @include flex;
+
+    &--line {
+      border-radius: 100px;
+      height: 4px;
+
+      &__bar {
+        width: 22px;
+        height: 4px;
+        border-radius: 100px;
+        background-color: #ffffff;
+        transition: transform 0.3s;
+      }
+    }
+
+    &__dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 100px;
+      margin: 0 4px;
+
+      &--active {
+        width: 12px;
+      }
+    }
+  }
+}
+</style>

package/components/hy-swiper/hy-swiper.vue

@@ -0,0 +1,242 @@
+<template>
+  <view
+    class="hy-swiper"
+    :style="{
+      backgroundColor: bgColor,
+      height: addUnit(height),
+      borderRadius: addUnit(radius)
+    }"
+  >
+    <view class="hy-swiper__loading" v-if="loading">
+      <HyIcon :is-rotate="loading" :name="IconConfig.LOADING"></HyIcon>
+    </view>
+    <swiper
+      v-else
+      class="hy-swiper__wrapper"
+      :style="{
+        flex: '1',
+        height: addUnit(height)
+      }"
+      @change="change"
+      :circular="circular"
+      :interval="interval"
+      :duration="duration"
+      :autoplay="autoplay"
+      :current="current"
+      :currentItemId="currentItemId"
+      :previousMargin="addUnit(previousMargin)"
+      :nextMargin="addUnit(nextMargin)"
+      :acceleration="acceleration"
+      :displayMultipleItems="displayMultipleItems"
+      :easingFunction="easingFunction"
+    >
+      <swiper-item
+        class="hy-swiper__wrapper__item"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <slot :record="item" :index="index">
+          <view class="hy-swiper__wrapper__item__wrapper">
+            <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
+            <image
+              class="hy-swiper__wrapper__item__wrapper__image"
+              v-if="getItemType(item) === 'image'"
+              :src="getSource(item)"
+              :mode="imgMode"
+              @tap="clickHandler(index)"
+              :style="{
+                height: addUnit(height),
+                borderRadius: addUnit(radius)
+              }"
+            ></image>
+            <video
+              class="hy-swiper__wrapper__item__wrapper__video"
+              v-if="getItemType(item) === 'video'"
+              :id="`video-${index}`"
+              :enable-progress-gesture="false"
+              :src="getSource(item)"
+              :poster="getPoster(item)"
+              :title="showTitle && hasTitle(item)"
+              :style="{
+                height: addUnit(height)
+              }"
+              controls
+              @tap="clickHandler(index)"
+            ></video>
+            <view
+              v-if="showTitle && hasTitle(item)"
+              class="hy-swiper__wrapper__item__wrapper__title"
+            >
+              <text class="hy-line-1">{{ hasTitle(item) }}</text>
+            </view>
+          </view>
+        </slot>
+      </swiper-item>
+    </swiper>
+    <view class="hy-swiper__indicator" :style="[indicatorStyle]">
+      <slot name="indicator">
+        <HySwiperIndicator
+          v-if="!loading && indicator && !showTitle"
+          :indicatorActiveColor="indicatorActiveColor"
+          :indicatorInactiveColor="indicatorInactiveColor"
+          :length="list.length"
+          :current="currentIndex"
+          :indicatorMode="indicatorMode"
+        ></HySwiperIndicator>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs, ref, watch, getCurrentInstance } from "vue";
+import { addUnit, isVideo } from "../../utils";
+import defaultProps from "./props";
+import HyIcon from "../hy-icon/hy-icon.vue";
+import { IconConfig } from "../../config";
+import IProps, { SwiperVo } from "./typing";
+import HySwiperIndicator from "./hy-swiper-indicator.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { keyName, list, current } = toRefs(props);
+const emit = defineEmits(["click", "update:current", "change"]);
+
+const instance = getCurrentInstance();
+const currentIndex = ref<string | number>(0);
+
+watch(
+  () => current.value,
+  (newVal) => {
+    currentIndex.value = newVal;
+  }
+);
+
+const hasTitle = computed(() => {
+  return (item: string | Record<string, any>) => {
+    if (typeof item === "object") {
+      return item.title ?? "";
+    } else {
+      return "";
+    }
+  };
+});
+/**
+ * @description 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
+ * */
+const getSource = (item: string | Record<string, any>): string => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && keyName.value) return item[keyName.value];
+  return "";
+};
+
+/**
+ * @description 轮播切换事件
+ */
+const change = (e: SwiperVo) => {
+  // 当前的激活索引
+  const { current } = e.detail;
+  pauseVideo(currentIndex.value);
+  currentIndex.value = current;
+  emit("update:current", currentIndex.value);
+  emit("change", e.detail);
+};
+
+/**
+ * @description 切换轮播时，暂停视频播放
+ * */
+const pauseVideo = (index: number | string) => {
+  const lastItem = getSource(list.value[Number(index)]);
+  if (isVideo(lastItem)) {
+    // 当视频隐藏时，暂停播放
+    const video = uni.createVideoContext(`video-${index}`, instance);
+    video.pause();
+  }
+};
+
+/**
+ * @description 当一个轮播item为视频时，获取它的视频海报
+ * */
+const getPoster = (item: string | Record<string, unknown>): string => {
+  return typeof item === "object" && item.poster ? item.poster : "";
+};
+
+/**
+ * @description 点击某个item
+ * */
+const clickHandler = (index: number) => {
+  emit("click", index);
+};
+
+/**
+ * @description 判断链接是视频还是图片
+ * */
+const getItemType = computed(() => {
+  return (item: string | Record<string, unknown>) => {
+    if (typeof item === "string") return isVideo(item) ? "video" : "image";
+    if (typeof item === "object" && keyName.value) {
+      if (!item.type)
+        return isVideo(item[keyName.value] as string) ? "video" : "image";
+      if (item.type === "image") return "image";
+      if (item.type === "video") return "video";
+      return "image";
+    }
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-swiper__wrapper {
+  flex: 1;
+}
+.hy-swiper {
+  @include flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  &__wrapper {
+    flex: 1;
+
+    &__item {
+      flex: 1;
+
+      &__wrapper {
+        @include flex;
+        position: relative;
+        overflow: hidden;
+        transition: transform 0.3s;
+        flex: 1;
+
+        &__image {
+          flex: 1;
+        }
+
+        &__video {
+          flex: 1;
+        }
+
+        &__title {
+          position: absolute;
+          background-color: rgba(0, 0, 0, 0.3);
+          bottom: 0;
+          left: 0;
+          right: 0;
+          font-size: 28rpx;
+          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-lg;
+          color: #ffffff;
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    bottom: $hy-border-margin-padding-sm;
+  }
+}
+</style>

package/components/hy-swiper/props.ts

@@ -0,0 +1,30 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  list: () => [],
+  indicator: false,
+  indicatorActiveColor: "#FFFFFF",
+  indicatorInactiveColor: "rgba(255, 255, 255, 0.35)",
+  indicatorStyle: {},
+  indicatorMode: "line",
+  autoplay: true,
+  current: 0,
+  currentItemId: "",
+  interval: 3000,
+  duration: 300,
+  circular: false,
+  previousMargin: 0,
+  nextMargin: 0,
+  acceleration: false,
+  displayMultipleItems: 1,
+  easingFunction: "default",
+  keyName: "url",
+  imgMode: "aspectFill",
+  height: 130,
+  bgColor: "#f3f4f6",
+  radius: 4,
+  loading: false,
+  showTitle: false
+};
+
+export default defaultProps;

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

@@ -0,0 +1,107 @@
+import { ImageModeVo } from "../../typing";
+import type { CSSProperties, PropType } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 轮播图数据
+   * */
+  list: PropType<(string | Record<string, unknown>)[]>;
+  /**
+   * @description list数组中指定对象的目标属性名（默认 'url' ）
+   * */
+  keyName?: string;
+  /**
+   * @description 是否显示面板指示器（默认 false ）
+   * */
+  indicator?: boolean;
+  /**
+   * @description 指示器非激活颜色（默认 '#FFFFFF' ）
+   * */
+  indicatorActiveColor?: string;
+  /**
+   * @description 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
+   * */
+  indicatorInactiveColor?: string;
+  /**
+   * @description 指示器样式，可通过bottom，left，right进行定位
+   * */
+  indicatorStyle?: CSSProperties;
+  /**
+   * @description 指示器模式（默认 'line' ）
+   * */
+  indicatorMode?: "line" | "dot";
+  /**
+   * @description 是否自动切换（默认 true ）
+   * */
+  autoplay?: boolean;
+  /**
+   * @description 当前所在滑块的 index（默认 0 ）
+   * */
+  current?: number | string;
+  /**
+   * @description 当前所在滑块的 item-id ，不能与 current 被同时指定
+   * */
+  currentItemId?: string;
+  /**
+   * @description 滑块自动切换时间间隔（ms）（默认 3000 ）
+   * */
+  interval?: number;
+  /**
+   * @description 滑块切换过程所需时间（ms）（默认 300 ）
+   * */
+  duration?: number;
+  /**
+   * @description 播放到末尾后是否重新回到开头（默认 false ）
+   * */
+  circular?: boolean;
+  /**
+   * @description 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
+   * */
+  previousMargin?: number | string;
+  /**
+   * @description 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
+   * */
+  nextMargin?: number | string;
+  /**
+   * @description 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
+   * */
+  acceleration?: boolean;
+  /**
+   * @description 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
+   * */
+  displayMultipleItems?: number;
+  /**
+   * @description 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
+   * */
+  easingFunction?: string;
+  /**
+   * @description 图片的裁剪模式（默认 'aspectFill' ）
+   * */
+  imgMode?: ImageModeVo;
+  /**
+   * @description 组件高度（默认 130 ）
+   * */
+  height?: number;
+  /**
+   * @description 背景颜色（默认 	'#f3f4f6' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 组件圆角，数值或带单位的字符串（默认 4 ）
+   * */
+  radius?: number | string;
+  /**
+   * @description 是否加载中（默认 false ）
+   * */
+  loading?: boolean;
+  /**
+   * @description 是否显示标题，要求数组对象中有title属性（默认 false ）
+   * */
+  showTitle?: boolean;
+}
+
+export interface SwiperVo {
+  detail: {
+    current: number;
+  };
+}

package/components/hy-switch/hy-switch.vue

@@ -0,0 +1,168 @@
+<template>
+  <view
+    class="hy-switch cursor-pointer"
+    :class="[disabled && 'hy-switch--disabled']"
+    :style="[switchStyle, customStyle]"
+    @tap="clickHandler"
+  >
+    <view class="hy-switch__bg" :style="[bgStyle]"> </view>
+    <view
+      :class="['hy-switch__node', modelValue && 'hy-switch__node--on']"
+      :style="[nodeStyle]"
+      ref="hy-switch__node"
+    >
+      <HyIcon
+        v-if="loading"
+        :name="IconConfig.LOADING"
+        is-rotate
+        :color="modelValue ? activeColor : '#AAABAD'"
+        :size="size * 0.6"
+      ></HyIcon>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { toRefs, watch, ref, nextTick, computed, CSSProperties } from "vue";
+import { IconConfig } from "../../config";
+import { addUnit, error } from "../../utils";
+import defaultProps from "./props";
+import IProps from "./typing";
+
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  modelValue,
+  size,
+  space,
+  inactiveValue,
+  activeValue,
+  activeColor,
+  disabled,
+  loading,
+  asyncChange,
+  inactiveColor
+} = toRefs(props);
+const emit = defineEmits(["update:modelValue", "change"]);
+const bgColor = ref("#ffffff");
+
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    if (newValue !== inactiveValue.value && newValue !== activeValue.value) {
+      error("v-model绑定的值必须为inactiveValue、activeValue二者之一");
+    }
+  },
+  { immediate: true }
+);
+
+const isActive = computed(() => {
+  return modelValue.value === activeValue.value;
+});
+const switchStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+  style.width = addUnit(size.value * 2 + 2);
+  style.height = addUnit(Number(size.value) + 2);
+  // style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
+  // 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
+  // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+  if (customInactiveColor.value) {
+    style.borderColor = "rgba(0, 0, 0, 0)";
+  }
+  style.backgroundColor = isActive.value
+    ? activeColor.value
+    : inactiveColor.value;
+  return style;
+});
+const nodeStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+  style.width = addUnit(size.value - space.value);
+  style.height = addUnit(size.value - space.value);
+  const translateX = isActive.value
+    ? addUnit(space.value)
+    : addUnit(size.value);
+  style.transform = `translateX(-${translateX})`;
+  return style;
+});
+const bgStyle = computed<CSSProperties>(() => {
+  let style: CSSProperties = {};
+  // 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
+  style.width = addUnit(Number(size.value) * 2 - size.value / 2);
+  style.height = addUnit(size.value);
+  style.backgroundColor = inactiveColor.value;
+  // 打开时，让此元素收缩，否则反之
+  style.transform = `scale(${isActive.value ? 0 : 1})`;
+  return style;
+});
+const customInactiveColor = computed(() => {
+  // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+  return inactiveColor.value !== "#fff" && inactiveColor.value !== "#ffffff";
+});
+
+const clickHandler = () => {
+  if (!disabled.value && !loading.value) {
+    const oldValue = isActive.value ? inactiveValue.value : activeValue.value;
+    if (!asyncChange.value) {
+      emit("update:modelValue", oldValue);
+    }
+    // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+    nextTick(() => {
+      emit("change", oldValue);
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-switch {
+  @include flex(row);
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  position: relative;
+  background-color: #fff;
+  border-width: 1px;
+  border-radius: 100px;
+  transition: background-color 0.4s;
+  border-color: rgba(0, 0, 0, 0.12);
+  border-style: solid;
+  justify-content: flex-end;
+  align-items: center;
+  // 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+  // 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
+  overflow: hidden;
+
+  &__node {
+    @include flex(row);
+    align-items: center;
+    justify-content: center;
+    border-radius: 100px;
+    background-color: #fff;
+    border-radius: 100px;
+    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
+    transition-property: transform;
+    transition-duration: 0.4s;
+    transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &__bg {
+    position: absolute;
+    border-radius: 100px;
+    background-color: #ffffff;
+    transition-property: transform;
+    transition-duration: 0.4s;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    transition-timing-function: ease;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+</style>