hy-app 0.1.1

package/components/hy-rate/hy-rate.vue

@@ -0,0 +1,261 @@
+<template>
+  <view class="hy-rate" :id="elId" ref="hy-rate" :style="[customStyle]">
+    <view
+      class="hy-rate__content"
+      @touchmove.stop="touchMove"
+      @touchend.stop="touchEnd"
+    >
+      <view
+        class="hy-rate__content__item cursor-pointer"
+        v-for="(item, index) in Number(count)"
+        :key="index"
+        :class="[elClass]"
+      >
+        <view
+          class="hy-rate__content__item__icon-wrap"
+          ref="hy-rate__content__item__icon-wrap"
+          @tap.stop="clickHandler($event)"
+        >
+          <HyIcon
+            :name="Math.floor(activeIndex) > index ? activeIcon : inactiveIcon"
+            :color="
+              disabled
+                ? '#c8c9cc'
+                : Math.floor(activeIndex) > index
+                ? activeColor
+                : inactiveColor
+            "
+            :custom-style="{
+              padding: `0 ${addUnit(gutter / 2)}`
+            }"
+            :size="size"
+          ></HyIcon>
+        </view>
+        <view
+          v-if="allowHalf"
+          @tap.stop="clickHandler($event)"
+          class="hy-rate__content__item__icon-wrap hy-rate__content__item__icon-wrap--half"
+          :style="[
+            {
+              width: addUnit(rateWidth / 2)
+            }
+          ]"
+          ref="hy-rate__content__item__icon-wrap"
+        >
+          <HyIcon
+            :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"
+            :color="
+              disabled
+                ? '#c8c9cc'
+                : Math.ceil(activeIndex) > index
+                ? activeColor
+                : inactiveColor
+            "
+            :custom-style="{
+              padding: `0 ${addUnit(gutter / 2)}`
+            }"
+            :size="size"
+          ></HyIcon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { addUnit, getRect, guid, range, sleep } from "../../utils";
+import { ref, watch, toRefs, onMounted, nextTick } from "vue";
+import IProps from "./typing";
+import defaultProps from "./props";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const {
+  modelValue,
+  touchable,
+  minCount,
+  count,
+  disabled,
+  readonly,
+  allowHalf
+} = toRefs(props);
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const elId = guid();
+const elClass = guid();
+const rateBoxLeft = ref<number>(0);
+const activeIndex = ref(modelValue.value);
+// 每个星星的宽度
+const rateWidth = ref(0);
+// 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
+const moving = ref(false);
+
+watch(
+  () => modelValue.value,
+  (newValue) => {
+    activeIndex.value = newValue;
+  }
+);
+watch(
+  () => activeIndex.value,
+  (newVal) => {
+    emitEvent();
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+const init = () => {
+  sleep(200).then(() => {
+    getRateItemRect();
+    getRateIconWrapRect();
+  });
+};
+
+// 获取评分组件盒子的布局信息
+const getRateItemRect = async () => {
+  await sleep();
+  // #ifndef APP-NVUE
+  const res: UniApp.NodeInfo = (await getRect(`#${elId}`)) as UniApp.NodeInfo;
+  rateBoxLeft.value = res.left || 0;
+  // #endif
+};
+// 获取单个星星的尺寸
+const getRateIconWrapRect = async () => {
+  // uView封装的获取节点的方法，详见文档
+  // #ifndef APP-NVUE
+  const res: UniApp.NodeInfo = (await getRect(
+    `.${elClass}`
+  )) as UniApp.NodeInfo;
+  rateWidth.value = res.width || 0;
+  // #endif
+};
+// 手指滑动
+const touchMove = (e: TouchEvent) => {
+  // 如果禁止通过手动滑动选择，返回
+  if (!touchable.value) {
+    return;
+  }
+  e.stopPropagation();
+  const x = e.changedTouches[0].pageX;
+  getActiveIndex(x);
+};
+// 停止滑动
+const touchEnd = (e: TouchEvent) => {
+  // 如果禁止通过手动滑动选择，返回
+  if (!touchable.value) {
+    return;
+  }
+  e.stopPropagation();
+  const x = e.changedTouches[0].pageX;
+  getActiveIndex(x);
+};
+// 通过点击，直接选中
+const clickHandler = (e: TouchEvent) => {
+  // if (moving.value) {
+  //   return;
+  // }
+  e.stopPropagation();
+  let x = 0;
+  // #ifndef APP-NVUE
+  x = e.changedTouches[0].pageX;
+  // #endif
+  getActiveIndex(x, true);
+};
+// 发出事件
+const emitEvent = () => {
+  // 发出change事件
+  emit("change", activeIndex.value);
+  // 同时修改双向绑定的值
+  emit("update:modelValue", activeIndex.value);
+};
+// 获取当前激活的评分图标
+const getActiveIndex = (x: number, isClick = false) => {
+  if (disabled.value || readonly.value) {
+    return;
+  }
+  // 判断当前操作的点的x坐标值，是否在允许的边界范围内
+  const allRateWidth = rateWidth.value * count.value + rateBoxLeft.value;
+  // 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
+  x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value;
+  // 滑动点相对于评分盒子左边的距离
+  const distance = x;
+  // 滑动的距离，相当于多少颗星星
+  let index;
+  // 判断是否允许半星
+  if (allowHalf.value) {
+    index = Math.floor(distance / rateWidth.value);
+    // 取余，判断小数的区间范围
+    const decimal = distance % rateWidth.value;
+    if (decimal <= rateWidth.value / 2 && decimal > 0) {
+      index += 0.5;
+    } else if (decimal > rateWidth.value / 2) {
+      index++;
+    }
+  } else {
+    index = Math.floor(distance / rateWidth.value);
+    // 取余，判断小数的区间范围
+    const decimal = distance % rateWidth.value;
+    // 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
+    if (isClick) {
+      if (decimal > 0) index++;
+    } else {
+      if (decimal > rateWidth.value / 2) index++;
+    }
+  }
+  activeIndex.value = Math.min(index, count.value);
+  // 对最少颗星星的限制
+  if (activeIndex.value < minCount.value) {
+    activeIndex.value = minCount.value;
+  }
+
+  // 设置延时为了让click事件在touchmove之前触发
+  setTimeout(() => {
+    moving.value = true;
+  }, 10);
+  // 一定时间后，取消标识为移动中状态，是为了让click事件无效
+  setTimeout(() => {
+    moving.value = false;
+  }, 10);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+
+.hy-rate {
+  @include flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  /* #ifndef APP-NVUE */
+  touch-action: none;
+  /* #endif */
+
+  &__content {
+    @include flex;
+
+    &__item {
+      position: relative;
+
+      &__icon-wrap {
+        &--half {
+          position: absolute;
+          overflow: hidden;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+}
+.hy-icon {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+</style>

package/components/hy-rate/props.ts

@@ -0,0 +1,18 @@
+import { ColorConfig, IconConfig } from "../../config";
+
+const defaultProps = {
+  modelValue: 1,
+  count: 5,
+  disabled: false,
+  readonly: false,
+  size: 18,
+  inactiveColor: "#b2b2b2",
+  activeColor: ColorConfig.primary,
+  gutter: 4,
+  minCount: 1,
+  allowHalf: false,
+  activeIcon: IconConfig.STAR_FILL,
+  inactiveIcon: IconConfig.STAR,
+  touchable: true
+};
+export default defaultProps;

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

@@ -0,0 +1,60 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description v-model绑定的值
+   * */
+  modelValue: number;
+  /**
+   * @description 星星的数量
+   * */
+  count?: number;
+  /**
+   * @description 是否禁用
+   * */
+  disabled?: boolean;
+  /**
+   * @description 是否只读
+   * */
+  readonly?: boolean;
+  /**
+   * @description 星星的大小
+   * */
+  size?: number | string;
+  /**
+   * @description 未激活星星的颜色
+   * */
+  inactiveColor?: string;
+  /**
+   * @description 激活星星的颜色
+   * */
+  activeColor?: string;
+  /**
+   * @description 星星之间的间距
+   * */
+  gutter?: number;
+  /**
+   * @description 最小星星数量
+   * */
+  minCount?: number;
+  /**
+   * @description 是否允许半星
+   * */
+  allowHalf?: boolean;
+  /**
+   * @description 激活状态的图标
+   * */
+  activeIcon?: string;
+  /**
+   * @description 未激活状态的图标
+   * */
+  inactiveIcon?: string;
+  /**
+   * @description 是否可触摸
+   * */
+  touchable?: boolean;
+  /**
+   * @description 自定义样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-read-more/hy-read-more.vue

@@ -0,0 +1,134 @@
+<template>
+  <view class="hy-read-more">
+    <view
+      class="hy-read-more__content"
+      :style="{
+        height:
+          isLongContent && status === 'close'
+            ? addUnit(showHeight)
+            : addUnit(contentHeight),
+        textIndent: textIndent
+      }"
+    >
+      <view
+        class="hy-read-more__content__inner"
+        ref="hy-read-more__content__inner"
+        :class="[elId]"
+      >
+        <slot></slot>
+      </view>
+    </view>
+    <view
+      class="hy-read-more__toggle"
+      :style="[innerShadowStyle]"
+      v-if="isLongContent"
+    >
+      <slot name="toggle">
+        <view class="hy-read-more__toggle__text" @tap="toggleReadMore">
+          <text
+            :style="{
+              color: color,
+              fontSize: addUnit(fontSize),
+              lineHeight: addUnit(fontSize),
+              marginRight: '5px'
+            }"
+            >{{ status === "close" ? closeText : openText }}</text
+          >
+          <view class="hy-read-more__toggle__icon">
+            <HyIcon
+              :color="color"
+              :size="fontSize + 2"
+              :name="status === 'close' ? IconConfig.DOWN : IconConfig.UP"
+            ></HyIcon>
+          </view>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs, ref, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps from "./typing";
+import { addUnit, getRect, guid, sleep } from "../../utils";
+import { IconConfig } from "../../config";
+
+// 组件
+import HyIcon from "../hy-icon/hy-icon.vue";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { shadowStyle, toggle, name, showHeight } = toRefs(props);
+const emit = defineEmits(["close", "open"]);
+
+const isLongContent = ref<boolean>(false); // 是否需要隐藏一部分内容
+const status = ref<"close" | "open">("close"); // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+const elId = ref<string>(guid()); // 生成唯一class
+const contentHeight = ref<number>(100); // 内容高度
+
+const innerShadowStyle = computed<CSSProperties>(() => {
+  if (status.value === "open") return {};
+  else return shadowStyle.value;
+});
+
+onMounted(() => {
+  getContentHeight();
+});
+
+/**
+ * @description 获取内容的高度
+ * */
+const getContentHeight = async () => {
+  // 延时一定时间再获取节点
+  await sleep(30);
+  getRect("." + elId.value).then((res: any) => {
+    contentHeight.value = res.height || 0;
+    // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+    if (res.height && res.height > showHeight.value / 2) {
+      isLongContent.value = true;
+      status.value = "close";
+    } else {
+      isLongContent.value = false;
+      status.value = "close";
+    }
+  });
+};
+/**
+ * @description 展开或者收起
+ * */
+const toggleReadMore = () => {
+  status.value = status.value === "close" ? "open" : "close";
+  // 如果toggle为false，隐藏"收起"部分的内容
+  if (!toggle.value) isLongContent.value = false;
+  // 发出打开或者收齐的事件
+  emit(status.value, name.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/mixin.scss";
+@import "../../theme.scss";
+
+.hy-read-more {
+  &__content {
+    overflow: hidden;
+    color: $hy-color-paragraph;
+    font-size: 15px;
+    text-align: left;
+    transition: height 0.3s ease;
+  }
+
+  &__toggle {
+    @include flex;
+    justify-content: center;
+    position: relative;
+
+    &__text {
+      @include flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

package/components/hy-read-more/props.ts

@@ -0,0 +1,20 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  showHeight: 200,
+  toggle: true,
+  closeText: "展开阅读全文",
+  openText: "收起",
+  color: "#2979ff",
+  fontSize: 14,
+  textIndent: "2em",
+  name: "",
+  shadowStyle: {
+    backgroundImage:
+      "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+    paddingTop: "100px",
+    marginTop: "-100px"
+  }
+};
+
+export default defaultProps;

package/components/hy-read-more/typing.d.ts

@@ -0,0 +1,44 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+   * */
+  showHeight?: number;
+  /**
+   * @description 展开后是否显示收起按钮（默认 false ）
+   * */
+  toggle?: boolean;
+  /**
+   * @description 关闭时的提示文字（默认 '展开阅读全文' ）
+   * */
+  closeText?: string;
+  /**
+   * @description 展开时的提示文字（默认 '收起' ）
+   * */
+  openText?: string;
+  /**
+   * @description 提示文字的颜色（默认 '#2979ff' ）
+   * */
+  color?: string;
+  /**
+   * @description 提示文字的大小，单位px （默认 14 ）
+   * */
+  fontSize?: number;
+  /**
+   * @description 段落首行缩进的字符个数 （默认 '2em' ）
+   * */
+  textIndent?: string;
+  /**
+   * @description 用于在 open 和 close 事件中当作回调参数返回
+   * */
+  name?: string;
+  /**
+   * @description 显示阴影的样式
+   * */
+  shadowStyle?: CSSProperties;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

package/components/hy-safe-bottom/hy-safe-bottom.vue

@@ -0,0 +1,64 @@
+<template>
+  <view
+    class="u-safe-bottom"
+    :style="[style]"
+    :class="[!isNvue && 'u-safe-area-inset-bottom']"
+  >
+  </view>
+</template>
+
+<script>
+import { props } from "./props.js";
+import { mpMixin } from "../../libs/mixin/mpMixin";
+import { mixin } from "../../libs/mixin/mixin";
+import {
+  addStyle,
+  deepMerge,
+  addUnit,
+  getWindowInfo
+} from "../../libs/function/index";
+/**
+ * SafeBottom 底部安全区
+ * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+ * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+ * @property {type}		prop_name
+ * @property {Object}	customStyle	定义需要用到的外部样式
+ *
+ * @event {Function()}
+ * @example <u-status-bar></u-status-bar>
+ */
+export default {
+  name: "u-safe-bottom",
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      safeAreaBottomHeight: 0,
+      isNvue: false
+    };
+  },
+  computed: {
+    style() {
+      const style = {};
+      // #ifdef APP-NVUE || MP-TOUTIAO
+      // nvue下，高度使用js计算填充
+      style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, "px");
+      // #endif
+      return deepMerge(style, addStyle(this.customStyle));
+    }
+  },
+  mounted() {
+    // #ifdef APP-NVUE
+    // 标识为是否nvue
+    this.isNvue = true;
+    // #endif
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.u-safe-bottom {
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  /* #endif */
+}
+</style>