hy-app 0.5.9 → 0.5.11

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

@@ -1,94 +1,94 @@
-<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>
-        <swiper
-            :disable-touch="disableTouch"
-            :vertical="!step"
-            :circular="true"
-            :interval="duration"
-            :autoplay="true"
-            class="hy-notice__swiper"
-            @change="noticeChange"
-        >
-            <swiper-item
-                v-for="(item, index) in text"
-                :key="index"
-                class="hy-notice__swiper--item"
-                :style="{ justifyContent: justifyContent }"
-            >
-                <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{ item }}</text>
-            </swiper-item>
-        </swiper>
-        <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'"
-                :name="IconConfig.CLOSE"
-                :size="16"
-                :color="color"
-                @click="close"
-            ></hy-icon>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { type CSSProperties, toRefs, computed, ref, watch } from 'vue'
-import noticeBarProps from './props'
-import { addUnit, error, IconConfig } from '../../libs'
-
-// 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-
-const props = defineProps(noticeBarProps)
-const { text, fontSize, color } = toRefs(props)
-const emit = defineEmits(['click', 'close'])
-
-const index = ref(0)
-
-watch(
-    () => text.value,
-    (newVal) => !Array.isArray(newVal) && error('传入值必须是数组'),
-    { immediate: true }
-)
-
-/**
- * @description 文字内容的样式
- * */
-const textStyle = computed<CSSProperties>(() => {
-    let style: CSSProperties = {}
-    style.color = color.value
-    style.fontSize = addUnit(fontSize.value)
-    return style
-})
-
-const noticeChange = (e: any) => {
-    index.value = e.detail.current
-}
-
-/**
- * @description 点击通告栏
- * */
-const clickHandler = (index: number) => {
-    emit('click', index)
-}
-/**
- * @description 点击关闭按钮
- * */
-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>
+        <swiper
+            :disable-touch="disableTouch"
+            :vertical="!step"
+            :circular="true"
+            :interval="duration"
+            :autoplay="true"
+            class="hy-notice__swiper"
+            @change="noticeChange"
+        >
+            <swiper-item
+                v-for="(item, index) in text"
+                :key="index"
+                class="hy-notice__swiper--item"
+                :style="{ justifyContent: justifyContent }"
+            >
+                <text class="hy-notice__swiper--item__text" :style="[textStyle]">{{ item }}</text>
+            </swiper-item>
+        </swiper>
+        <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'"
+                :name="IconConfig.CLOSE"
+                :size="16"
+                :color="color"
+                @click="close"
+            ></hy-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, toRefs, computed, ref, watch } from 'vue'
+import noticeBarProps from './props'
+import { addUnit, error, IconConfig } from '../../libs'
+
+// 组件
+import HyIcon from '../hy-icon/hy-icon.vue'
+
+const props = defineProps(noticeBarProps)
+const { text, fontSize, color } = toRefs(props)
+const emit = defineEmits(['click', 'close'])
+
+const index = ref(0)
+
+watch(
+    () => text.value,
+    (newVal) => !Array.isArray(newVal) && error('传入值必须是数组'),
+    { immediate: true }
+)
+
+/**
+ * @description 文字内容的样式
+ * */
+const textStyle = computed<CSSProperties>(() => {
+    let style: CSSProperties = {}
+    style.color = color.value
+    style.fontSize = addUnit(fontSize.value)
+    return style
+})
+
+const noticeChange = (e: any) => {
+    index.value = e.detail.current
+}
+
+/**
+ * @description 点击通告栏
+ * */
+const clickHandler = (index: number) => {
+    emit('click', index)
+}
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+    emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -1,96 +1,96 @@
-<template>
-    <view
-        class="hy-notice-bar"
-        v-if="show"
-        :style="[
-            {
-                backgroundColor: bgColor
-            },
-            customStyle
-        ]"
-    >
-        <template v-if="direction === 'column' || (direction === 'row' && step)">
-            <HyColumnNotice
-                :color="color"
-                :bgColor="bgColor"
-                :text="text"
-                :mode="mode"
-                :step="step"
-                :icon="icon"
-                :disable-touch="disableTouch"
-                :fontSize="fontSize"
-                :duration="duration"
-                :justifyContent="justifyContent"
-                @close="close"
-                @click="click"
-            ></HyColumnNotice>
-        </template>
-        <template v-else>
-            <HyRowNotice
-                :color="color"
-                :bgColor="bgColor"
-                :text="text"
-                :mode="mode"
-                :fontSize="fontSize"
-                :speed="speed"
-                :url="url"
-                :linkType="linkType"
-                :icon="icon"
-                @close="close"
-                @click="click"
-            ></HyRowNotice>
-        </template>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'hy-notice-bar',
-    options: {
-        addGlobalClass: true,
-        virtualHost: true,
-        styleIsolation: 'shared'
-    }
-}
-</script>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { INoticeBarEmits } from './typing'
-import noticeBarProps from './props'
-// 组件
-import HyRowNotice from './hy-row-notice.vue'
-import HyColumnNotice from './hy-column-notice.vue'
-
-/**
- * 该组件用于滚动通告场景，有多种模式可供选择
- * @displayName hy-notice-bar
- */
-defineOptions({})
-
-const show = ref(true)
-
-const props = defineProps(noticeBarProps)
-const emit = defineEmits<INoticeBarEmits>()
-
-/**
- * @description 点击通告栏
- * */
-const click = (index: number) => {
-    emit('click', index)
-    if (props.url && props.linkType && props.mode === 'link') {
-        ;(uni as any)[props.linkType]({ url: props.url })
-    }
-}
-/**
- * @description 点击关闭按钮
- * */
-const close = () => {
-    show.value = false
-    emit('close')
-}
-</script>
-
-<style lang="scss" scoped>
-@import './index.scss';
-</style>
+<template>
+    <view
+        class="hy-notice-bar"
+        v-if="show"
+        :style="[
+            {
+                backgroundColor: bgColor
+            },
+            customStyle
+        ]"
+    >
+        <template v-if="direction === 'column' || (direction === 'row' && step)">
+            <HyColumnNotice
+                :color="color"
+                :bgColor="bgColor"
+                :text="text"
+                :mode="mode"
+                :step="step"
+                :icon="icon"
+                :disable-touch="disableTouch"
+                :fontSize="fontSize"
+                :duration="duration"
+                :justifyContent="justifyContent"
+                @close="close"
+                @click="click"
+            ></HyColumnNotice>
+        </template>
+        <template v-else>
+            <HyRowNotice
+                :color="color"
+                :bgColor="bgColor"
+                :text="text"
+                :mode="mode"
+                :fontSize="fontSize"
+                :speed="speed"
+                :url="url"
+                :linkType="linkType"
+                :icon="icon"
+                @close="close"
+                @click="click"
+            ></HyRowNotice>
+        </template>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'hy-notice-bar',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { INoticeBarEmits } from './typing'
+import noticeBarProps from './props'
+// 组件
+import HyRowNotice from './hy-row-notice.vue'
+import HyColumnNotice from './hy-column-notice.vue'
+
+/**
+ * 该组件用于滚动通告场景，有多种模式可供选择
+ * @displayName hy-notice-bar
+ */
+defineOptions({})
+
+const show = ref(true)
+
+const props = defineProps(noticeBarProps)
+const emit = defineEmits<INoticeBarEmits>()
+
+/**
+ * @description 点击通告栏
+ * */
+const click = (index: number) => {
+    emit('click', index)
+    if (props.url && props.linkType && props.mode === 'link') {
+        ;(uni as any)[props.linkType]({ url: props.url })
+    }
+}
+/**
+ * @description 点击关闭按钮
+ * */
+const close = () => {
+    show.value = false
+    emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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>