hy-app 0.6.9 → 0.7.1

package/components/hy-notice-bar/hy-row-notice.vue

@@ -1,121 +1,89 @@
-<template>
-    <view class="hy-notice" @tap="clickHandler">
-        <slot name="icon">
-            <view class="hy-notice__left-icon" v-if="icon">
-                <hy-icon :name="icon" :color="color" size="19"></hy-icon>
-            </view>
-        </slot>
-        <view class="hy-notice__content" ref="hy-notice__content">
-            <view
-                ref="hy-notice__content--text"
-                class="hy-notice__content--text"
-                :style="animationStyle"
-            >
-                <text v-for="(item, index) in innerText" :key="index" :style="textStyle">{{
-                    item
-                }}</text>
-            </view>
-        </view>
-        <view class="hy-notice__right-icon" v-if="['link', 'closable'].includes(mode)">
-            <hy-icon
-                v-if="mode === 'link'"
-                :name="IconConfig.RIGHT"
-                :size="17"
-                :color="color"
-            ></hy-icon>
-            <hy-icon
-                v-if="mode === 'closable'"
-                @click="close"
-                :name="IconConfig.CLOSE"
-                :size="16"
-                :color="color"
-            ></hy-icon>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, toRefs, computed, type CSSProperties, getCurrentInstance } from 'vue'
-import noticeBarProps from './props'
-import { addUnit, getRect, sleep, IconConfig } from '../../libs'
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-const props = defineProps(noticeBarProps)
-const { text, speed, fontSize, color } = toRefs(props)
-const emit = defineEmits(['click', 'close'])
-
-const instance = getCurrentInstance()
-const animationDuration = ref<string>('0') // 动画执行时间
-const animationPlayState = ref<string>('paused') // 动画的开始和结束执行
-const initValue = ref<string>('')
-
-watch(
-    () => text.value,
-    async (newValue) => {
-        initValue.value = Array.isArray(newValue) ? newValue.join('') : newValue
-        let boxWidth = 0,
-            textWidth = 0
-        // 进行一定的延时
-        await sleep()
-        // 查询盒子和文字的宽度
-        textWidth = (await getRect('.hy-notice__content--text', false, instance)).width!
-        boxWidth = (await getRect('.hy-notice__content', false, instance)).width!
-        // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
-        // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
-        animationDuration.value = `${textWidth / speed.value}s`
-        // 这里必须这样开始动画，否则在APP上动画速度不会改变
-        animationPlayState.value = 'paused'
-        await sleep(10)
-        animationPlayState.value = 'running'
-    },
-    { immediate: true }
-)
-
-/**
- * @description 文字内容的样式
- * */
-const textStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    style.whiteSpace = 'nowrap !important'
-    style.color = color.value
-    style.fontSize = addUnit(fontSize.value)
-    return style
-})
-/**
- * @description 动画的样式
- * */
-const animationStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    style.animationDuration = animationDuration.value
-    style.animationPlayState = animationPlayState.value
-    return style
-})
-// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
-// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
-const innerText = computed(() => {
-    let result = [],
-        // 每组text标签的字符长度
-        len = 20
-    const textArr = initValue.value.split('')
-    for (let i = 0; i < textArr.length; i += len) {
-        // 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
-        result.push(textArr.slice(i, i + len).join(''))
-    }
-    return result
-})
-
-// 点击通告栏
-const clickHandler = (index: number) => {
-    emit('click', index)
-}
-
-// 点击关闭按钮
-const close = () => {
-    emit('close')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view class="hy-notice__content" ref="hy-notice__content">
+        <view
+            ref="hy-notice__content--text"
+            class="hy-notice__content--text"
+            :style="animationStyle"
+        >
+            <text v-for="(item, index) in innerText" :key="index" :style="textStyle">{{
+                item
+            }}</text>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, toRefs, computed, type CSSProperties, getCurrentInstance } from 'vue'
+import noticeBarProps from './props'
+import { addUnit, getRect, sleep } from '../../libs'
+
+const props = defineProps(noticeBarProps)
+const { text, speed, fontSize, color } = toRefs(props)
+const emit = defineEmits(['change'])
+
+const instance = getCurrentInstance()
+const animationDuration = ref<string>('0') // 动画执行时间
+const animationPlayState = ref<string>('paused') // 动画的开始和结束执行
+const initValue = ref<string>('')
+
+watch(
+    () => text.value,
+    async (newValue) => {
+        initValue.value = Array.isArray(newValue) ? newValue.join('') : newValue
+        let boxWidth = 0,
+            textWidth = 0
+        // 进行一定的延时
+        await sleep()
+        // 查询盒子和文字的宽度
+        textWidth = (await getRect('.hy-notice__content--text', false, instance)).width!
+        boxWidth = (await getRect('.hy-notice__content', false, instance)).width!
+        // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+        // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+        animationDuration.value = `${textWidth / speed.value}s`
+        // 这里必须这样开始动画，否则在APP上动画速度不会改变
+        animationPlayState.value = 'paused'
+        await sleep(10)
+        animationPlayState.value = 'running'
+    },
+    { immediate: true }
+)
+
+/**
+ * @description 文字内容的样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    style.whiteSpace = 'nowrap !important'
+    style.color = color.value
+    style.fontSize = addUnit(fontSize.value)
+    return style
+})
+
+/**
+ * @description 动画的样式
+ * */
+const animationStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    style.animationDuration = animationDuration.value
+    style.animationPlayState = animationPlayState.value
+    return style
+})
+
+// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
+// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
+const innerText = computed(() => {
+    let result = [],
+        // 每组text标签的字符长度
+        len = 20
+    const textArr = initValue.value.split('')
+    for (let i = 0; i < textArr.length; i += len) {
+        // 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
+        result.push(textArr.slice(i, i + len).join(''))
+    }
+    return result
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/hy-notice-bar/props.ts

@@ -1,85 +1,86 @@
-import type { NoticeBarModeVo } from './typing'
-import { IconConfig } from '../../libs'
-import type { CSSProperties, PropType } from 'vue'
-
-const noticeBarProps = {
-    /** 显示的内容，数组 */
-    text: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: []
-    },
-    /**
-     * 通告滚动模式，row-横向滚动，column-竖向滚动
-     * @values row,column
-     * */
-    direction: {
-        type: String,
-        default: 'row'
-    },
-    /** direction = row时，是否使用步进形式滚动  */
-    step: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否显示左侧的音量图标 */
-    icon: {
-        type: String,
-        default: IconConfig.NOTIFICATION_FILL
-    },
-    /**
-     * 通告模式，link-显示右箭头，closable-显示右侧关闭图标
-     * @values link,closable
-     * */
-    mode: String,
-    /** 文字颜色，各图标也会使用文字颜色 */
-    color: {
-        type: String,
-        default: '#ff9900'
-    },
-    /** 背景颜色 */
-    bgColor: String,
-    /** 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 */
-    speed: {
-        type: Number,
-        default: 80
-    },
-    /** 字体大小，单位px */
-    fontSize: {
-        type: [String, Number],
-        default: 14
-    },
-    /** 滚动一个周期的时间长，单位ms */
-    duration: {
-        type: Number,
-        default: 2000
-    },
-    /** 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 */
-    disableTouch: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 分布
-     * @values flex-start,flex-start,center
-     * */
-    justifyContent: {
-        type: String,
-        default: 'flex-start'
-    },
-    /**
-     * 跳转类型
-     * @values navigateTo,redirectTo,switchTab,reLaunch
-     * */
-    linkType: {
-        type: String,
-        default: 'navigateTo'
-    },
-    /** 跳转地址 */
-    url: String,
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default noticeBarProps
+import type { NoticeBarModeVo } from './typing'
+import { IconConfig } from '../../libs'
+import type { CSSProperties, PropType } from 'vue'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const noticeBarProps = {
+    /** 显示的内容，数组 */
+    text: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: []
+    },
+    /**
+     * 通告滚动模式，row-横向滚动，column-竖向滚动
+     * @values row,column
+     * */
+    direction: {
+        type: String,
+        default: 'row'
+    },
+    /** direction = row时，是否使用步进形式滚动  */
+    step: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示左侧的音量图标 */
+    icon: {
+        type: [String, Object] as PropType<string | Partial<HyIconProps>>,
+        default: IconConfig.NOTIFICATION_FILL
+    },
+    /**
+     * 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+     * @values link,closable
+     * */
+    mode: String,
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: {
+        type: String,
+        default: '#ff9900'
+    },
+    /** 背景颜色 */
+    bgColor: String,
+    /** 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 */
+    speed: {
+        type: Number,
+        default: 80
+    },
+    /** 字体大小，单位px */
+    fontSize: {
+        type: [String, Number],
+        default: 14
+    },
+    /** 滚动一个周期的时间长，单位ms */
+    duration: {
+        type: Number,
+        default: 2000
+    },
+    /** 是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 */
+    disableTouch: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 分布
+     * @values flex-start,flex-start,center
+     * */
+    justifyContent: {
+        type: String,
+        default: 'flex-start'
+    },
+    /**
+     * 跳转类型
+     * @values navigateTo,redirectTo,switchTab,reLaunch
+     * */
+    linkType: {
+        type: String,
+        default: 'navigateTo'
+    },
+    /** 跳转地址 */
+    url: String,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default noticeBarProps

package/components/hy-notify/hy-notify.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type HyNotifyProps from './typing'
+import type { NotifyOptions, INotifyExpose } from './typing'
 import { computed, ref } from 'vue'
 import type { CSSProperties } from 'vue'
 import { addUnit, IconConfig } from '../../libs'
@@ -60,7 +60,7 @@ defineOptions({})
 
 const props = defineProps(notifyProps)
 
-const config = ref<HyNotifyProps>({
+const config = ref<NotifyOptions>({
     // 到顶部的距离
     top: props.top,
     // type主题，primary，success，warning，error
@@ -78,12 +78,12 @@ const config = ref<HyNotifyProps>({
     // 是否留出顶部安全距离（状态栏高度）
     safeAreaInsetTop: props.safeAreaInsetTop
 })
-const tmpConfig = ref<HyNotifyProps>({})
+const tmpConfig = ref<NotifyOptions>({})
 const open = ref(false)
 let timer: ReturnType<typeof setTimeout>
 
 /**
- * @description 容器样式
+ * 容器样式
  * */
 const containerStyle = computed(() => {
     let top = 0
@@ -106,7 +106,7 @@ const containerStyle = computed(() => {
     return style
 })
 /**
- * @description 组件背景颜色
+ * 组件背景颜色
  */
 const backgroundColor = computed(() => {
     const style: CSSProperties = {}
@@ -117,7 +117,7 @@ const backgroundColor = computed(() => {
 })
 
 /**
- * @description 默认主题下的图标
+ * 默认主题下的图标
  * */
 const icon = computed(() => {
     switch (tmpConfig.value.type) {
@@ -132,7 +132,7 @@ const icon = computed(() => {
     }
 })
 
-const show = (options: HyNotifyProps) => {
+const show = (options: NotifyOptions) => {
     // 不将结果合并到this.config变量，避免多次调用hy-toast，前后的配置造成混乱
     tmpConfig.value = Object.assign(config.value, options)
     // 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
@@ -149,13 +149,13 @@ const show = (options: HyNotifyProps) => {
     }
 }
 /**
- * @description 关闭notify
+ * 关闭notify
  * */
 const close = () => {
     clearTimer()
 }
 /**
- * @description 清除定时任务
+ * 清除定时任务
  * */
 const clearTimer = () => {
     open.value = false
@@ -163,7 +163,7 @@ const clearTimer = () => {
     clearTimeout(timer)
 }
 
-defineExpose({
+defineExpose<INotifyExpose>({
     show,
     close
 })

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

@@ -0,0 +1,35 @@
+export interface NotifyOptions {
+    /** 到顶部的距离 */
+    top?: number
+    /** 主题类型 */
+    type?: NotifyType
+    /** 字体颜色 */
+    color?: string
+    /** 背景颜色 */
+    bgColor?: string
+    /** 自定义图标 */
+    icon?: string
+    /** 展示的文字内容 */
+    message?: string
+    /** 展示时长，为 0 时不消失 */
+    duration?: number
+    /** 字体大小 */
+    fontSize?: number | string
+    /** 是否留出顶部安全距离 */
+    safeAreaInsetTop?: boolean
+    /** 关闭后的回调函数 */
+    complete?: () => void
+}
+
+/** HyNotify 组件实例暴露的方法 */
+export interface INotifyExpose {
+    /**
+     * 显示 Notify 提示
+     * @param options Notify 配置选项
+     */
+    show: (options: NotifyOptions) => void
+    /**
+     * 关闭 Notify 提示
+     */
+    close: () => void
+}