hy-app 0.2.13 → 0.2.15

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

@@ -1,10 +1,6 @@
 <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" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
       <view
         class="hy-rate__content__item cursor-pointer"
         v-for="(item, index) in Number(count)"
@@ -19,11 +15,7 @@
           <HyIcon
             :name="Math.floor(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="
-              disabled
-                ? '#c8c9cc'
-                : Math.floor(activeIndex) > index
-                  ? activeColor
-                  : inactiveColor
+              disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor
             "
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`,
@@ -45,11 +37,7 @@
           <HyIcon
             :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"
             :color="
-              disabled
-                ? '#c8c9cc'
-                : Math.ceil(activeIndex) > index
-                  ? activeColor
-                  : inactiveColor
+              disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor
             "
             :custom-style="{
               padding: `0 ${addUnit(gutter / 2)}`,
@@ -63,85 +51,152 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件一般用于满意度调查，星型评分的场景。
+ * @displayName hy-rate
+ */
+defineOptions({})
 export default {
   name: 'hy-rate',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { addUnit, getRect, guid, range, sleep } from "../../utils";
-import { ref, watch, toRefs, onMounted, getCurrentInstance } from "vue";
-import type IProps from "./typing";
-import defaultProps from "./props";
+import { addUnit, getRect, guid, range, sleep } from '../../utils'
+import { ref, watch, toRefs, onMounted, getCurrentInstance } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IRateEmits } from './typing'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+import HyIcon from '../hy-icon/hy-icon.vue'
+import { IconConfig } from '@/package'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const {
-  modelValue,
-  touchable,
-  minCount,
-  count,
-  disabled,
-  readonly,
-  allowHalf,
-} = toRefs(props);
-const emit = defineEmits(["update:modelValue", "change"]);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** v-model绑定的值 */
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  /** 星星的默认最多数 */
+  count: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否只读 */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /** 星星的大小 */
+  size: {
+    type: Number,
+    default: 18,
+  },
+  /** 未激活星星的颜色 */
+  inactiveColor: {
+    type: String,
+    default: '#b2b2b2',
+  },
+  /** 激活星星的颜色 */
+  activeColor: {
+    type: String,
+    default: '#FFF00D',
+  },
+  /** 星星之间的间距 */
+  gutter: {
+    type: Number,
+    default: 4,
+  },
+  /** 最小星星数量 */
+  minCount: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否允许半星 */
+  allowHalf: {
+    type: Boolean,
+    default: false,
+  },
+  /** 激活状态的图标 */
+  activeIcon: {
+    type: String,
+    default: IconConfig.STAR_FILL,
+  },
+  /** 未激活状态的图标 */
+  inactiveIcon: {
+    type: String,
+    default: IconConfig.STAR,
+  },
+  /** 是否可触摸 */
+  touchable: {
+    type: Boolean,
+    default: true,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
+const { modelValue, touchable, minCount, count, disabled, readonly, allowHalf } = toRefs(props)
+const emit = defineEmits<IRateEmits>()
 
-const elId = guid();
-const elClass = guid();
-const rateBoxLeft = ref<number>(0);
-const activeIndex = ref(modelValue.value);
+const elId = guid()
+const elClass = guid()
+const rateBoxLeft = ref<number>(0)
+const activeIndex = ref(modelValue.value)
 // 每个星星的宽度
-const rateWidth = ref(0);
+const rateWidth = ref(0)
 // 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
-const moving = ref(false);
+const moving = ref(false)
 
 watch(
   () => modelValue.value,
   (newValue) => {
-    activeIndex.value = newValue;
+    activeIndex.value = newValue
   },
-);
+)
 watch(
   () => activeIndex.value,
   (newVal) => {
-    emitEvent();
+    emitEvent()
   },
-);
-const instance = getCurrentInstance();
+)
+const instance = getCurrentInstance()
 
 onMounted(() => {
-  init();
-});
+  init()
+})
 
 const init = () => {
   sleep(300).then(async () => {
-    await getRateItemRect();
-    await getRateIconWrapRect();
-  });
-};
+    await getRateItemRect()
+    await getRateIconWrapRect()
+  })
+}
 
 /**
  * @description 获取评分组件盒子的布局信息
  * */
 const getRateItemRect = async () => {
-  await sleep();
+  await sleep()
   // #ifndef APP-NVUE
-  const res: UniApp.NodeInfo = (await getRect(
-    `#${elId}`,
-    false,
-    instance,
-  )) as UniApp.NodeInfo;
-  rateBoxLeft.value = res.left || 0;
+  const res: UniApp.NodeInfo = (await getRect(`#${elId}`, false, instance)) as UniApp.NodeInfo
+  rateBoxLeft.value = res.left || 0
   // #endif
-};
+}
 
 /**
  * @description 获取单个星星的尺寸
@@ -149,104 +204,100 @@ const getRateItemRect = async () => {
 const getRateIconWrapRect = async () => {
   // uView封装的获取节点的方法，详见文档
   // #ifndef APP-NVUE
-  const res: UniApp.NodeInfo = (await getRect(
-    `.${elClass}`,
-    false,
-    instance,
-  )) as UniApp.NodeInfo;
-  rateWidth.value = res.width || 0;
+  const res: UniApp.NodeInfo = (await getRect(`.${elClass}`, false, instance)) as UniApp.NodeInfo
+  rateWidth.value = res.width || 0
   // #endif
-};
+}
 // 手指滑动
 const touchMove = (e: TouchEvent) => {
   // 如果禁止通过手动滑动选择，返回
   if (!touchable.value) {
-    return;
+    return
   }
-  e.stopPropagation();
-  const x = e.changedTouches[0].pageX;
-  getActiveIndex(x);
-};
+  e.stopPropagation()
+  const x = e.changedTouches[0].pageX
+  getActiveIndex(x)
+}
 // 停止滑动
 const touchEnd = (e: TouchEvent) => {
   // 如果禁止通过手动滑动选择，返回
   if (!touchable.value) {
-    return;
+    return
   }
-  e.stopPropagation();
-  const x = e.changedTouches[0].pageX;
-  getActiveIndex(x);
-};
+  e.stopPropagation()
+  const x = e.changedTouches[0].pageX
+  getActiveIndex(x)
+}
 // 通过点击，直接选中
 const clickHandler = (e: TouchEvent) => {
   // if (moving.value) {
   //   return;
   // }
-  e.stopPropagation();
-  let x = 0;
+  e.stopPropagation()
+  let x = 0
   // #ifndef APP-NVUE
-  x = e.changedTouches[0].pageX;
+  x = e.changedTouches[0].pageX
   // #endif
-  getActiveIndex(x, true);
-};
+  getActiveIndex(x, true)
+}
 // 发出事件
 const emitEvent = () => {
   // 发出change事件
-  emit("change", activeIndex.value);
+  emit('change', activeIndex.value)
   // 同时修改双向绑定的值
-  emit("update:modelValue", activeIndex.value);
-};
+  emit('update:modelValue', activeIndex.value)
+}
 // 获取当前激活的评分图标
 const getActiveIndex = (x: number, isClick = false) => {
   if (disabled.value || readonly.value) {
-    return;
+    return
   }
   // 判断当前操作的点的x坐标值，是否在允许的边界范围内
-  const allRateWidth = rateWidth.value * count.value + rateBoxLeft.value;
+  const allRateWidth = rateWidth.value * count.value + rateBoxLeft.value
   // 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
-  x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value;
+  x = range(rateBoxLeft.value, allRateWidth, x) - rateBoxLeft.value
   // 滑动点相对于评分盒子左边的距离
-  const distance = x;
+  const distance = x
   // 滑动的距离，相当于多少颗星星
-  let index;
+  let index
   // 判断是否允许半星
   if (allowHalf.value) {
-    index = Math.floor(distance / rateWidth.value);
+    index = Math.floor(distance / rateWidth.value)
     // 取余，判断小数的区间范围
-    const decimal = distance % rateWidth.value;
+    const decimal = distance % rateWidth.value
     if (decimal <= rateWidth.value / 2 && decimal > 0) {
-      index += 0.5;
+      index += 0.5
     } else if (decimal > rateWidth.value / 2) {
-      index++;
+      index++
     }
   } else {
-    index = Math.floor(distance / rateWidth.value);
+    index = Math.floor(distance / rateWidth.value)
     // 取余，判断小数的区间范围
-    const decimal = distance % rateWidth.value;
+    const decimal = distance % rateWidth.value
     // 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
     if (isClick) {
-      if (decimal > 0) index++;
+      if (decimal > 0) index++
     } else {
-      if (decimal > rateWidth.value / 2) index++;
+      if (decimal > rateWidth.value / 2) index++
     }
   }
-  activeIndex.value = Math.min(index, count.value);
+  activeIndex.value = Math.min(index, count.value)
   // 对最少颗星星的限制
   if (activeIndex.value < minCount.value) {
-    activeIndex.value = minCount.value;
+    activeIndex.value = minCount.value
   }
 
   // 设置延时为了让click事件在touchmove之前触发
   setTimeout(() => {
-    moving.value = true;
-  }, 10);
+    moving.value = true
+  }, 10)
   // 一定时间后，取消标识为移动中状态，是为了让click事件无效
   setTimeout(() => {
-    moving.value = false;
-  }, 10);
-};
+    moving.value = false
+  }, 10)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>

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

@@ -1,60 +1,67 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyRateProps {
   /**
    * @description v-model绑定的值
    * */
-  modelValue: number;
+  modelValue: number
   /**
-   * @description 星星的数量
+   * @description 星星的默认最多数
    * */
-  count?: number;
+  count?: number
   /**
    * @description 是否禁用
    * */
-  disabled?: boolean;
+  disabled?: boolean
   /**
    * @description 是否只读
    * */
-  readonly?: boolean;
+  readonly?: boolean
   /**
    * @description 星星的大小
    * */
-  size?: number | string;
+  size?: number | string
   /**
    * @description 未激活星星的颜色
    * */
-  inactiveColor?: string;
+  inactiveColor?: string
   /**
    * @description 激活星星的颜色
    * */
-  activeColor?: string;
+  activeColor?: string
   /**
    * @description 星星之间的间距
    * */
-  gutter?: number;
+  gutter?: number
   /**
    * @description 最小星星数量
    * */
-  minCount?: number;
+  minCount?: number
   /**
    * @description 是否允许半星
    * */
-  allowHalf?: boolean;
+  allowHalf?: boolean
   /**
    * @description 激活状态的图标
    * */
-  activeIcon?: string;
+  activeIcon?: string
   /**
    * @description 未激活状态的图标
    * */
-  inactiveIcon?: string;
+  inactiveIcon?: string
   /**
    * @description 是否可触摸
    * */
-  touchable?: boolean;
+  touchable?: boolean
   /**
    * @description 自定义样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+}
+
+export interface IRateEmits {
+  /** 选中的星星发生变化时触发 */
+  (e: 'change', index: number): void
+  /** 更新值触发 */
+  (e: 'update:modelValue', index: number): void
 }

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

@@ -3,26 +3,16 @@
     <view
       class="hy-read-more__content"
       :style="{
-        height:
-          isLongContent && status === 'close'
-            ? addUnit(showHeight)
-            : addUnit(contentHeight),
+        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]"
-      >
+      <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',
-        status !== 'open' && 'hy-read-more__toggle--mask',
-      ]"
+      :class="['hy-read-more__toggle', status !== 'open' && 'hy-read-more__toggle--mask']"
       :style="[innerShadowStyle]"
       v-if="isLongContent"
     >
@@ -35,8 +25,9 @@
               lineHeight: addUnit(fontSize),
               marginRight: '5px',
             }"
-            >{{ status === "close" ? closeText : openText }}</text
           >
+            {{ status === 'close' ? closeText : openText }}
+          </text>
           <view class="hy-read-more__toggle__icon">
             <HyIcon
               :color="color"
@@ -51,82 +42,118 @@
 </template>
 
 <script lang="ts">
+/**
+ * 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @displayName hy-read-more
+ */
+defineOptions({})
 export default {
   name: 'hy-read-more',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  toRefs,
-  ref,
-  onMounted,
-  getCurrentInstance,
-} from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import { addUnit, getRect, guid, sleep } from "../../utils";
-import { IconConfig } from "../../config";
+import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import type { IReadMoreEmits } from './typing'
+import { addUnit, getRect, guid, sleep } from '../../utils'
+import { IconConfig } from '../../config'
 
 // 组件
-import HyIcon from "../hy-icon/hy-icon.vue";
+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 props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 内容超出此高度才会显示展开全文按钮，单位px */
+  showHeight: {
+    type: [String, Number],
+    default: 200,
+  },
+  /** 展开后是否显示收起按钮 */
+  toggle: {
+    type: Boolean,
+    default: true,
+  },
+  /** 关闭时的提示文字 */
+  closeText: {
+    type: String,
+    default: '展开阅读全文',
+  },
+  /** 展开时的提示文字 */
+  openText: {
+    type: String,
+    default: '收起',
+  },
+  /** 提示文字的颜色 */
+  color: String,
+  /** 提示文字的大小，单位px */
+  fontSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  /** 段落首行缩进的字符个数 */
+  textIndent: {
+    type: String,
+    default: '2em',
+  },
+  /** 用于在 open 和 close 事件中当作回调参数返回 */
+  name: String,
+  /** 显示阴影的样式 */
+  shadowStyle: Object as PropType<CSSProperties>,
+})
+const { shadowStyle, toggle, name, showHeight } = toRefs(props)
+const emit = defineEmits<IReadMoreEmits>()
 
-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 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;
-});
+  if (status.value === 'open') return {}
+  else return shadowStyle.value
+})
 
 onMounted(() => {
-  getContentHeight();
-});
+  getContentHeight()
+})
 
 /**
  * @description 获取内容的高度
  * */
 const getContentHeight = async () => {
-  const instance = getCurrentInstance();
+  const instance = getCurrentInstance()
   // 延时一定时间再获取节点
-  await sleep(30);
-  getRect("." + elId.value, false, instance).then((res: any) => {
-    contentHeight.value = res.height || 0;
+  await sleep(30)
+  getRect('.' + elId.value, false, instance).then((res: any) => {
+    contentHeight.value = res.height || 0
     // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
     if (res.height && res.height > showHeight.value / 2) {
-      isLongContent.value = true;
-      status.value = "close";
+      isLongContent.value = true
+      status.value = 'close'
     } else {
-      isLongContent.value = false;
-      status.value = "close";
+      isLongContent.value = false
+      status.value = 'close'
     }
-  });
-};
+  })
+}
 /**
  * @description 展开或者收起
  * */
 const toggleReadMore = () => {
-  status.value = status.value === "close" ? "open" : "close";
+  status.value = status.value === 'close' ? 'open' : 'close'
   // 如果toggle为false，隐藏"收起"部分的内容
-  if (!toggle.value) isLongContent.value = false;
+  if (!toggle.value) isLongContent.value = false
   // 发出打开或者收齐的事件
-  emit(status.value, name.value);
-};
+  emit(status.value, name.value)
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>