uview-pro 0.5.6 → 0.5.7

package/changelog.md

@@ -1,13 +1,30 @@
-## 0.5.6（2026-02-04）
+## 0.5.7（2026-02-06）
 
 ### 🐛 Bug Fixes | Bug 修复
 
-- **vue-tsc:** 修复部分定时器ts类型定义错误问题（#124） ([dada764](https://github.com/anyup/uView-Pro/commit/dada764eaa6ea73402e8fa6d96a783ae2a68715a))
+- **u-tabs:** 修复u-tabs的scroll-view在不同平台会显示滚动条的问题，统一各平台的滚动条隐藏逻辑 ([6ba904b](https://github.com/anyup/uView-Pro/commit/6ba904b85fdc5be69ab8b430878e16fa74674c64))
+- **demo:** 修复演示项目在钉钉小程序调用uni.setTabBarItem报错问题（#125） ([fd4ea39](https://github.com/anyup/uView-Pro/commit/fd4ea3987928039e9dcc3a53dc8bea42fce2b685))
+- **u-input,u-field:** 修复输入框绑定值为undefined和null时的显示异常问题 ([4af659f](https://github.com/anyup/uView-Pro/commit/4af659fb365179e3ed7db26a1d8571c327497f7a))
+
+### ✨ Features | 新功能
+
+- **demo-page:** 所有页面支持小程序分享功能 ([a055904](https://github.com/anyup/uView-Pro/commit/a05590443e898ed076d47a04cb8bfc74c2e73da8))
+- **u-card:** u-card添加圆角配置功能并调整默认边框样式 ([e43c939](https://github.com/anyup/uView-Pro/commit/e43c9396a17fe485305e63895a7ea8d6edf1906b))
 
 ### 👥 Contributors
 
 <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.5.6（2026-02-04）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **vue-tsc:** 修复部分定时器ts类型定义错误问题（#124） ([dada764](https://github.com/anyup/uView-Pro/commit/dada764eaa6ea73402e8fa6d96a783ae2a68715a))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
+
 ## 0.5.5（2026-02-02）
 
 ### ✨ Features | 新功能

package/components/u-card/types.ts

@@ -25,7 +25,7 @@ export const CardProps = {
     /** 副标题字体大小，单位rpx */
     subTitleSize: { type: [Number, String], default: '26' },
     /** 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) */
-    border: { type: Boolean, default: true },
+    border: { type: Boolean, default: false },
     /** 用于标识点击了第几个 */
     index: { type: [String, Number, Object] as PropType<CardIndex>, default: '' },
     /** 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" */

package/components/u-field/u-field.vue

@@ -36,7 +36,7 @@
                         v-if="props.type === 'textarea'"
                         class="u-flex-1 u-textarea-class"
                         :style="$u.toStyle(props.fieldStyle)"
-                        :value="String(props.modelValue)"
+                        :value="inputValue"
                         :placeholder="String(props.placeholder)"
                         :placeholderStyle="props.placeholderStyle"
                         :disabled="props.disabled"
@@ -56,7 +56,7 @@
                         class="u-flex-1 u-field__input-wrap"
                         :style="$u.toStyle(props.fieldStyle)"
                         :type="(props.type as any)"
-                        :value="String(props.modelValue)"
+                        :value="inputValue"
                         :password="props.password || props.type === 'password'"
                         :placeholder="String(props.placeholder)"
                         :placeholderStyle="props.placeholderStyle"
@@ -74,7 +74,7 @@
                     <view v-if="props.disabled" class="u-field-disabled-overlay" @tap="fieldClick"></view>
                 </view>
                 <u-icon
-                    v-if="props.clearable && props.modelValue != '' && focused && !props.disabled"
+                    v-if="props.clearable && inputValue !== '' && focused && !props.disabled"
                     :size="props.clearSize"
                     name="close-circle-fill"
                     color="var(--u-light-color)"
@@ -160,44 +160,16 @@ import { $u } from '../..';
  * @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field>
  */
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm', 'right-icon-click', 'click']);
+const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur', 'confirm', 'right-icon-click', 'click']);
 
-/**
- * field 输入框
- * @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。
- * @property {string} icon label左边的图标，限uView的图标名称
- * @property {string} rightIcon 输入框右边的图标名称，限uView的图标名称（默认false）
- * @property {boolean} required 是否必填，左边显示红色"*"号（默认false）
- * @property {string} label 输入框左边的文字提示
- * @property {boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false）
- * @property {boolean} clearable 是否显示右侧清空内容的图标控件（默认true）
- * @property {number|string} labelWidth label的宽度，单位rpx（默认130）
- * @property {string} labelAlign label的文字对齐方式（默认left）
- * @property {string} inputAlign 输入框内容对齐方式（默认left）
- * @property {string} iconColor 左边通过icon配置的图标的颜色（默认var(--u-content-color)）
- * @property {boolean} autoHeight 是否自动增高输入区域，type为textarea时有效（默认true）
- * @property {string|boolean} errorMessage 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
- * @property {string} placeholder 输入框的提示文字
- * @property {string} placeholderStyle placeholder的样式(内联样式，字符串)，如"color: var(--u-divider-color)"
- * @property {boolean} focus 是否自动获得焦点（默认false）
- * @property {boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
- * @property {boolean} disabled 是否不可输入（默认false）
- * @property {number|string} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
- * @property {string} confirmType 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
- * @property {string} labelPosition label位置（默认left）
- * @property {Record<string, any>} fieldStyle 自定义输入框的样式，对象形式
- * @property {number|string} clearSize 清除图标的大小，单位rpx（默认30）
- * @property {Record<string, any>} iconStyle 左侧图标样式
- * @property {boolean} borderTop 是否显示field的上边框（默认false）
- * @property {boolean} borderBottom 是否显示field的下边框（默认true）
- * @property {boolean} trim 是否自动去除输入内容首尾空格（默认true）
- * @property {string|number} value 输入框绑定值
- * @property {string} type 输入框类型（text/textarea/password等，默认text）
- */
 const props = defineProps(FieldProps);
 
 const focused = ref(false);
-const itemIndex = ref(0);
+
+const inputValue = computed<string>(() => {
+    if (props.modelValue === undefined || props.modelValue === null) return '';
+    return String(props.modelValue);
+});
 
 const inputWrapStyle = computed(() => {
     const style: Record<string, string> = {};
@@ -253,6 +225,7 @@ function onInput(event: any) {
     // 判断是否去除空格
     if (props.trim) value = $u.trim(value);
     emit('update:modelValue', value);
+    emit('input', value);
 }
 
 function onFocus(event: any) {

package/components/u-input/u-input.vue

@@ -19,7 +19,7 @@
             v-if="type == 'textarea'"
             class="u-input__input u-input__textarea"
             :style="getStyle"
-            :value="String(defaultValue)"
+            :value="inputValue"
             :placeholder="placeholder"
             :placeholderStyle="placeholderStyle"
             :disabled="disabled"
@@ -43,7 +43,7 @@
             class="u-input__input"
             :type="((type == 'password' ? 'text' : type) as any)"
             :style="getStyle"
-            :value="String(defaultValue)"
+            :value="inputValue"
             :password="type == 'password' && !showPassword"
             :placeholder="placeholder"
             :placeholderStyle="placeholderStyle"
@@ -65,7 +65,7 @@
         <view class="u-input__right-icon u-flex">
             <view
                 class="u-input__right-icon__clear u-input__right-icon__item"
-                v-if="clearable && modelValue != '' && !disabled"
+                v-if="clearable && inputValue !== '' && !disabled"
                 @click.stop="onClear"
             >
                 <u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" />
@@ -98,7 +98,7 @@
             }"
             v-if="props.type === 'textarea' && props.count"
         >
-            {{ String(defaultValue).length }}/{{ props.maxlength }}
+            {{ inputValue.length }}/{{ props.maxlength }}
         </text>
     </view>
 </template>
@@ -126,7 +126,6 @@ const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confir
 
 const { emitToParent } = useChildren('u-input', 'u-form-item');
 
-const defaultValue = ref(props.modelValue);
 const inputHeight = 70; // input的高度
 const textareaHeight = 100; // textarea的高度
 const validateState = ref(props.validateState); // 当前input的验证状态，用于错误时，边框是否改为红色
@@ -134,11 +133,15 @@ const focused = ref(false); // 当前是否处于获得焦点的状态
 const showPassword = ref(false); // 是否预览密码
 const lastValue = ref(''); // 用于头条小程序，判断@input中，前后的值是否发生了变化
 
+const inputValue = computed<string>(() => {
+    if (props.modelValue === undefined || props.modelValue === null) return '';
+    return String(props.modelValue);
+});
+
 // 监听 value 变化
 watch(
-    () => props.modelValue,
+    () => inputValue.value,
     (nVal, oVal) => {
-        defaultValue.value = nVal;
         // 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
         if (nVal != oVal && props.type == 'select') handleInput({ detail: { value: nVal } });
     }
@@ -179,8 +182,6 @@ function handleInput(event: any) {
     let value = event.detail.value;
     // 判断是否去除空格
     if (props.trim) value = $u.trim(value);
-    // 当前model 赋值
-    defaultValue.value = value;
     emit('update:modelValue', value);
     emit('input', value);
     // 过一个生命周期再发送事件给u-form-item，否则this.$emit('update:modelValue')更新了父组件的值，但是微信小程序上
@@ -208,7 +209,7 @@ function handleBlur(event: any) {
         focused.value = false;
     }, 100);
     setTimeout(() => {
-        let value = String(defaultValue.value);
+        let value = inputValue.value;
         emit('blur', value);
         // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
         // #ifdef MP-TOUTIAO

package/components/u-tabs/u-tabs.vue

@@ -2,7 +2,13 @@
     <view class="u-tabs" :style="$u.toStyle({ background: bgColor }, customStyle)" :class="customClass">
         <!-- $u.getRect()对组件根节点无效，因为写了.in(this)，故这里获取内层接点尺寸 -->
         <view>
-            <scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
+            <scroll-view
+                scroll-x
+                class="u-scroll-view"
+                :scroll-left="scrollLeft"
+                :show-scrollbar="false"
+                scroll-with-animation
+            >
                 <view class="u-scroll-box" :id="id" :class="{ 'u-tabs-scroll-flex': !isScroll }">
                     <view
                         class="u-tab-item u-line-1"
@@ -246,9 +252,7 @@ scroll-view {
     box-sizing: border-box;
 }
 
-/* #ifndef APP-NVUE */
-::-webkit-scrollbar,
-::-webkit-scrollbar,
+// 隐藏滚动条样式，支持App、H5、小程序等平台
 ::-webkit-scrollbar {
     display: none;
     width: 0 !important;
@@ -256,7 +260,6 @@ scroll-view {
     -webkit-appearance: none;
     background: transparent;
 }
-/* #endif */
 
 .u-scroll-box {
     position: relative;
@@ -276,6 +279,13 @@ scroll-view ::v-deep ::-webkit-scrollbar {
 }
 /* #endif */
 
+// App-nvue 平台使用特殊的滚动条隐藏方式
+/* #ifdef APP-NVUE */
+.scroll-view-nvue {
+    -webkit-scrollbar: none;
+}
+/* #endif */
+
 .u-scroll-view {
     width: 100%;
     white-space: nowrap;

package/components/u-tabs-swiper/u-tabs-swiper.vue

@@ -4,6 +4,7 @@
             scroll-x
             class="u-scroll-view"
             :scroll-left="scrollLeft"
+            :show-scrollbar="false"
             scroll-with-animation
             :style="{ zIndex: Number(zIndex) + 1 }"
         >
@@ -315,9 +316,6 @@ scroll-view {
     transition-property: background-color, color;
 }
 
-/* #ifndef APP-NVUE */
-::-webkit-scrollbar,
-::-webkit-scrollbar,
 ::-webkit-scrollbar {
     display: none;
     width: 0 !important;
@@ -325,7 +323,6 @@ scroll-view {
     -webkit-appearance: none;
     background: transparent;
 }
-/* #endif */
 
 /* #ifdef H5 */
 // 通过样式穿透，隐藏H5下，scroll-view下的滚动条

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
-    "version": "0.5.6",
+    "version": "0.5.7",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",