hy-app 0.4.13 → 0.5.0

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

@@ -1,67 +1,68 @@
 import type { CSSProperties } from 'vue'
 
 export default interface HyRateProps {
-  /**
-   * @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
+    /**
+     * @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
 }
 
 export interface IRateEmits {
-  /** 选中的星星发生变化时触发 */
-  (e: 'change', index: number): void
-  /** 更新值触发 */
-  (e: 'update:modelValue', index: number): void
+    /** 选中的星星发生变化时触发 */
+    (e: 'change', index: number): void
+    /** 更新值触发 */
+    (e: 'update:modelValue', index: number): void
 }

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

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

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

@@ -1,15 +1,45 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  showHeight: 200,
-  toggle: true,
-  closeText: "展开阅读全文",
-  openText: "收起",
-  color: "",
-  fontSize: 14,
-  textIndent: "2em",
-  name: "",
-  shadowStyle: {},
-};
+const readMoreProps = {
+    /** 内容超出此高度才会显示展开全文按钮，单位px */
+    showHeight: {
+        type: Number,
+        default: 200
+    },
+    /** 展开后是否显示收起按钮 */
+    toggle: {
+        type: Boolean,
+        default: true
+    },
+    /** 关闭时的提示文字 */
+    closeText: {
+        type: String,
+        default: '展开阅读全文'
+    },
+    /** 展开时的提示文字 */
+    openText: {
+        type: String,
+        default: '收起'
+    },
+    /** 提示文字的颜色 */
+    color: String,
+    /** 提示文字的大小，单位px */
+    fontSize: {
+        type: Number,
+        default: 14
+    },
+    /** 段落首行缩进的字符个数 */
+    textIndent: {
+        type: String,
+        default: '2em'
+    },
+    /** 用于在 open 和 close 事件中当作回调参数返回 */
+    name: String,
+    /** 显示阴影的样式 */
+    shadowStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    }
+}
 
-export default defaultProps;
+export default readMoreProps