hy-app 0.6.4 → 0.6.6

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

@@ -1,121 +1,121 @@
-<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" @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>

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

@@ -1,174 +1,174 @@
-<template>
-    <hy-transition mode="slide-down" :customStyle="containerStyle" :show="open">
-        <view
-            :class="['hy-notify', `hy-notify--${tmpConfig?.type}`, customClass]"
-            :style="[backgroundColor, customStyle]"
-        >
-            <hy-status-bar v-if="tmpConfig?.safeAreaInsetTop"></hy-status-bar>
-            <view class="hy-notify__wrapper">
-                <template v-if="['success', 'warning', 'error'].includes(tmpConfig.type)">
-                    <slot v-if="$slots.icon" name="icon"></slot>
-                    <hy-icon
-                        v-else
-                        :name="tmpConfig?.icon || icon"
-                        :color="tmpConfig?.color"
-                        :size="tmpConfig.fontSize"
-                        :customStyle="{ marginRight: '4px' }"
-                    ></hy-icon>
-                </template>
-                <text
-                    class="hy-notify__wrapper--text"
-                    :style="{
-                        fontSize: addUnit(tmpConfig?.fontSize),
-                        color: tmpConfig?.color
-                    }"
-                >
-                    {{ tmpConfig?.message }}
-                </text>
-            </view>
-        </view>
-    </hy-transition>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-notify',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import type HyNotifyProps from './typing'
-import { computed, ref } from 'vue'
-import type { CSSProperties } from 'vue'
-import { addUnit, IconConfig } from '../../libs'
-import notifyProps from './props'
-// 组件
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-/**
- * 一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
- * @displayName hy-notify
- */
-defineOptions({})
-
-const props = defineProps(notifyProps)
-
-const config = ref<HyNotifyProps>({
-    // 到顶部的距离
-    top: props.top,
-    // type主题，primary，success，warning，error
-    type: props.type,
-    // 字体颜色
-    color: props.color,
-    // 背景颜色
-    bgColor: props.bgColor,
-    // 展示的文字内容
-    message: props.message,
-    // 展示时长，为0时不消失，单位ms
-    duration: props.duration,
-    // 字体大小
-    fontSize: props.fontSize,
-    // 是否留出顶部安全距离（状态栏高度）
-    safeAreaInsetTop: props.safeAreaInsetTop
-})
-const tmpConfig = ref<HyNotifyProps>({})
-const open = ref(false)
-let timer: ReturnType<typeof setTimeout>
-
-/**
- * @description 容器样式
- * */
-const containerStyle = computed(() => {
-    let top = 0
-    if (tmpConfig.value.top === 0) {
-        // #ifdef H5
-        // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
-        // H5的导航栏高度为44px
-        top = 44
-        // #endif
-    }
-    const style: CSSProperties = {
-        top: addUnit(tmpConfig.value.top === 0 ? top : tmpConfig.value.top),
-        // 因为组件底层为hy-transition组件，必须将其设置为fixed定位
-        // 让其出现在导航栏底部
-        position: 'fixed',
-        left: 0,
-        right: 0,
-        zIndex: 888
-    }
-    return style
-})
-/**
- * @description 组件背景颜色
- */
-const backgroundColor = computed(() => {
-    const style: CSSProperties = {}
-    if (tmpConfig.value.bgColor) {
-        style.backgroundColor = tmpConfig.value.bgColor
-    }
-    return style
-})
-
-/**
- * @description 默认主题下的图标
- * */
-const icon = computed(() => {
-    switch (tmpConfig.value.type) {
-        case 'success':
-            return IconConfig.SUCCESS
-        case 'error':
-            return IconConfig.CLOSE_CIRCLE
-        case 'warning':
-            return IconConfig.NOTICE_CIRCLE
-        default:
-            return ''
-    }
-})
-
-const show = (options: HyNotifyProps) => {
-    // 不将结果合并到this.config变量，避免多次调用hy-toast，前后的配置造成混乱
-    tmpConfig.value = Object.assign(config.value, options)
-    // 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
-    clearTimer()
-    open.value = true
-    if (tmpConfig.value.duration && tmpConfig.value.duration! > 0) {
-        timer = setTimeout(() => {
-            open.value = false
-            // 倒计时结束，清除定时器，隐藏toast组件
-            clearTimer()
-            // 判断是否存在callback方法，如果存在就执行
-            typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
-        }, tmpConfig.value.duration)
-    }
-}
-/**
- * @description 关闭notify
- * */
-const close = () => {
-    clearTimer()
-}
-/**
- * @description 清除定时任务
- * */
-const clearTimer = () => {
-    open.value = false
-    // 清除定时器
-    clearTimeout(timer)
-}
-
-defineExpose({
-    show,
-    close
-})
-</script>
-
-<style scoped lang="scss">
-@import './index.scss';
-</style>
+<template>
+    <hy-transition mode="slide-down" :customStyle="containerStyle" :show="open">
+        <view
+            :class="['hy-notify', `hy-notify--${tmpConfig?.type}`, customClass]"
+            :style="[backgroundColor, customStyle]"
+        >
+            <hy-status-bar v-if="tmpConfig?.safeAreaInsetTop"></hy-status-bar>
+            <view class="hy-notify__wrapper">
+                <template v-if="['success', 'warning', 'error'].includes(tmpConfig.type)">
+                    <slot v-if="$slots.icon" name="icon"></slot>
+                    <hy-icon
+                        v-else
+                        :name="tmpConfig?.icon || icon"
+                        :color="tmpConfig?.color"
+                        :size="tmpConfig.fontSize"
+                        :customStyle="{ marginRight: '4px' }"
+                    ></hy-icon>
+                </template>
+                <text
+                    class="hy-notify__wrapper--text"
+                    :style="{
+                        fontSize: addUnit(tmpConfig?.fontSize),
+                        color: tmpConfig?.color
+                    }"
+                >
+                    {{ tmpConfig?.message }}
+                </text>
+            </view>
+        </view>
+    </hy-transition>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-notify',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import type HyNotifyProps from './typing'
+import { computed, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { addUnit, IconConfig } from '../../libs'
+import notifyProps from './props'
+// 组件
+import HyTransition from '../hy-transition/hy-transition.vue'
+import HyStatusBar from '../hy-status-bar/hy-status-bar.vue'
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+/**
+ * 一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
+ * @displayName hy-notify
+ */
+defineOptions({})
+
+const props = defineProps(notifyProps)
+
+const config = ref<HyNotifyProps>({
+    // 到顶部的距离
+    top: props.top,
+    // type主题，primary，success，warning，error
+    type: props.type,
+    // 字体颜色
+    color: props.color,
+    // 背景颜色
+    bgColor: props.bgColor,
+    // 展示的文字内容
+    message: props.message,
+    // 展示时长，为0时不消失，单位ms
+    duration: props.duration,
+    // 字体大小
+    fontSize: props.fontSize,
+    // 是否留出顶部安全距离（状态栏高度）
+    safeAreaInsetTop: props.safeAreaInsetTop
+})
+const tmpConfig = ref<HyNotifyProps>({})
+const open = ref(false)
+let timer: ReturnType<typeof setTimeout>
+
+/**
+ * @description 容器样式
+ * */
+const containerStyle = computed(() => {
+    let top = 0
+    if (tmpConfig.value.top === 0) {
+        // #ifdef H5
+        // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+        // H5的导航栏高度为44px
+        top = 44
+        // #endif
+    }
+    const style: CSSProperties = {
+        top: addUnit(tmpConfig.value.top === 0 ? top : tmpConfig.value.top),
+        // 因为组件底层为hy-transition组件，必须将其设置为fixed定位
+        // 让其出现在导航栏底部
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        zIndex: 888
+    }
+    return style
+})
+/**
+ * @description 组件背景颜色
+ */
+const backgroundColor = computed(() => {
+    const style: CSSProperties = {}
+    if (tmpConfig.value.bgColor) {
+        style.backgroundColor = tmpConfig.value.bgColor
+    }
+    return style
+})
+
+/**
+ * @description 默认主题下的图标
+ * */
+const icon = computed(() => {
+    switch (tmpConfig.value.type) {
+        case 'success':
+            return IconConfig.SUCCESS
+        case 'error':
+            return IconConfig.CLOSE_CIRCLE
+        case 'warning':
+            return IconConfig.NOTICE_CIRCLE
+        default:
+            return ''
+    }
+})
+
+const show = (options: HyNotifyProps) => {
+    // 不将结果合并到this.config变量，避免多次调用hy-toast，前后的配置造成混乱
+    tmpConfig.value = Object.assign(config.value, options)
+    // 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
+    clearTimer()
+    open.value = true
+    if (tmpConfig.value.duration && tmpConfig.value.duration! > 0) {
+        timer = setTimeout(() => {
+            open.value = false
+            // 倒计时结束，清除定时器，隐藏toast组件
+            clearTimer()
+            // 判断是否存在callback方法，如果存在就执行
+            typeof tmpConfig.value.complete === 'function' && tmpConfig.value.complete()
+        }, tmpConfig.value.duration)
+    }
+}
+/**
+ * @description 关闭notify
+ * */
+const close = () => {
+    clearTimer()
+}
+/**
+ * @description 清除定时任务
+ * */
+const clearTimer = () => {
+    open.value = false
+    // 清除定时器
+    clearTimeout(timer)
+}
+
+defineExpose({
+    show,
+    close
+})
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>