hy-app 0.5.11 → 0.5.13

package/components/hy-input/index.scss

@@ -9,8 +9,7 @@
   color: $hy-text-color;
   
   @include e(border) {
-	/* TODO: 先这样写，因为在某些pda中写$hy-border-line，边框不显示，后续排除问题 */
-  	border: 1px solid #e8e8e8;
+  	border: $hy-border-line;
   }
 
   @include e(radius, square) {

package/components/hy-input/props.ts

@@ -1,186 +1,186 @@
-import type { CSSProperties, PropType } from 'vue'
-import type { InputConfirmType } from '@uni-helper/uni-types'
-import type { HyIconProps } from '../hy-icon/typing'
-
-const inputProps = {
-    /** 输入的值 */
-    modelValue: {
-        type: [String, Number],
-        required: true
-    },
-    /**
-     * 输入框类型，见上方说明
-     * @values text,idcard,number,digit,safe-password,tel,nickname
-     * */
-    type: {
-        type: String,
-        default: 'text'
-    },
-    /** 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 */
-    fixed: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否禁用输入框 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 禁用状态时的背景色 */
-    disabledColor: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示清除控件 */
-    clearable: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否密码类型 */
-    password: {
-        type: Boolean,
-        default: false
-    },
-    /** 最大输入长度，设置为 -1 的时候不限制最大长度  */
-    maxlength: {
-        type: Number,
-        default: -1
-    },
-    /** 输入框为空时的占位符 */
-    placeholder: String,
-    /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
-    placeholderClass: {
-        type: String,
-        default: 'input-placeholder'
-    },
-    /** 指定placeholder的样式，字符串/对象形式，如"color: red;" */
-    placeholderStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => ({})
-    },
-    /** 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 */
-    showWordLimit: {
-        type: Boolean,
-        default: false
-    },
-    /** 设置右下角按钮的文字，兼容性详见uni-app文档 */
-    confirmType: {
-        type: String as PropType<InputConfirmType>,
-        default: 'done'
-    },
-    /** 点击键盘右下角按钮时是否保持键盘不收起，H5无效 */
-    confirmHold: {
-        type: Boolean,
-        default: false
-    },
-    /** focus时，点击页面的时候不收起键盘，微信小程序有效 */
-    holdKeyboard: {
-        type: Boolean,
-        default: false
-    },
-    /** 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 */
-    focus: {
-        type: Boolean,
-        default: false
-    },
-    /** 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 */
-    autoBlur: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 */
-    disableDefaultPadding: {
-        type: Boolean,
-        default: false
-    },
-    /** 指定focus时光标的位置 */
-    cursor: {
-        type: Number,
-        default: 140
-    },
-    /** 输入框聚焦时底部与键盘的距离 */
-    cursorSpacing: {
-        type: Number,
-        default: 30
-    },
-    /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */
-    selectionStart: {
-        type: Number,
-        default: -1
-    },
-    /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */
-    selectionEnd: {
-        type: Number,
-        default: -1
-    },
-    /** 键盘弹起时，是否自动上推页面 */
-    adjustPosition: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 输入框内容对齐方式
-     * @values left,center,right
-     * */
-    inputAlign: {
-        type: String,
-        default: 'left'
-    },
-    /** 输入框字体的大小 */
-    fontSize: {
-        type: [String, Number],
-        default: '15px'
-    },
-    /** 输入框字体颜色 */
-    color: {
-        type: String,
-        default: ''
-    },
-    /** 输入框前置图标 */
-    prefixIcon: {
-        type: Object as PropType<HyIconProps>,
-        default: () => {}
-    },
-    /** 输入框后置图标 */
-    suffixIcon: {
-        type: Object as PropType<HyIconProps>,
-        default: () => {}
-    },
-    /**
-     * 边框类型
-     * @values surround,bottom,none
-     * */
-    border: {
-        type: String,
-        default: 'surround'
-    },
-    /** 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 */
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 输入框形状
-     * @values circle,square
-     * */
-    shape: {
-        type: String,
-        default: 'square'
-    },
-    /** 是否忽略组件内对文本合成系统事件的处理 */
-    ignoreCompositionEvent: {
-        type: Boolean,
-        default: false
-    },
-    /** 内容式化函数 */
-    formatter: Function,
-    /** 定义需要用到的外部样式 */
-    customStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: () => {}
-    },
-    /** 自定义外部类名 */
-    customClass: String
-} as const
-
-export default inputProps
+import type { CSSProperties, PropType } from 'vue'
+import type { InputConfirmType } from '@uni-helper/uni-types'
+import type { HyIconProps } from '../hy-icon/typing'
+
+const inputProps = {
+    /** 输入的值 */
+    modelValue: {
+        type: [String, Number],
+        required: true
+    },
+    /**
+     * 输入框类型，见上方说明
+     * @values test,idcard,number,digit,safe-password,tel,nickname
+     * */
+    type: {
+        type: String,
+        default: 'text'
+    },
+    /** 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 */
+    fixed: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否禁用输入框 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 禁用状态时的背景色 */
+    disabledColor: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示清除控件 */
+    clearable: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否密码类型 */
+    password: {
+        type: Boolean,
+        default: false
+    },
+    /** 最大输入长度，设置为 -1 的时候不限制最大长度(注：支付宝不支持-1，需要设置其他任意值)  */
+    maxlength: {
+        type: Number,
+        default: -1
+    },
+    /** 输入框为空时的占位符 */
+    placeholder: String,
+    /** 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ */
+    placeholderClass: {
+        type: String,
+        default: 'input-placeholder'
+    },
+    /** 指定placeholder的样式，字符串/对象形式，如"color: red;" */
+    placeholderStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => ({})
+    },
+    /** 是否显示输入字数统计，只在 type ="test"或type ="textarea"时有效 */
+    showWordLimit: {
+        type: Boolean,
+        default: false
+    },
+    /** 设置右下角按钮的文字，兼容性详见uni-app文档 */
+    confirmType: {
+        type: String as PropType<InputConfirmType>,
+        default: 'done'
+    },
+    /** 点击键盘右下角按钮时是否保持键盘不收起，H5无效 */
+    confirmHold: {
+        type: Boolean,
+        default: false
+    },
+    /** focus时，点击页面的时候不收起键盘，微信小程序有效 */
+    holdKeyboard: {
+        type: Boolean,
+        default: false
+    },
+    /** 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 */
+    focus: {
+        type: Boolean,
+        default: false
+    },
+    /** 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 */
+    autoBlur: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 */
+    disableDefaultPadding: {
+        type: Boolean,
+        default: false
+    },
+    /** 指定focus时光标的位置 */
+    cursor: {
+        type: Number,
+        default: 140
+    },
+    /** 输入框聚焦时底部与键盘的距离 */
+    cursorSpacing: {
+        type: Number,
+        default: 30
+    },
+    /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */
+    selectionStart: {
+        type: Number,
+        default: -1
+    },
+    /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */
+    selectionEnd: {
+        type: Number,
+        default: -1
+    },
+    /** 键盘弹起时，是否自动上推页面 */
+    adjustPosition: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * 输入框内容对齐方式
+     * @values left,center,right
+     * */
+    inputAlign: {
+        type: String,
+        default: 'left'
+    },
+    /** 输入框字体的大小 */
+    fontSize: {
+        type: [String, Number],
+        default: '15px'
+    },
+    /** 输入框字体颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 输入框前置图标 */
+    prefixIcon: {
+        type: Object as PropType<HyIconProps>,
+        default: () => {}
+    },
+    /** 输入框后置图标 */
+    suffixIcon: {
+        type: Object as PropType<HyIconProps>,
+        default: () => {}
+    },
+    /**
+     * 边框类型
+     * @values surround,bottom,none
+     * */
+    border: {
+        type: String,
+        default: 'surround'
+    },
+    /** 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 输入框形状
+     * @values circle,square
+     * */
+    shape: {
+        type: String,
+        default: 'square'
+    },
+    /** 是否忽略组件内对文本合成系统事件的处理 */
+    ignoreCompositionEvent: {
+        type: Boolean,
+        default: false
+    },
+    /** 内容式化函数 */
+    formatter: Function,
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: () => {}
+    },
+    /** 自定义外部类名 */
+    customClass: String
+} as const
+
+export default inputProps

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--test', 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>