uview-pro 0.6.3 → 0.6.4

package/changelog.md

@@ -1,3 +1,15 @@
+## 0.6.4（2026-06-02）
+
+### ✨ Features | 新功能
+
+- **u-input:** 新增readonly输入属性，支持设置输入框只读状态，新增禁用与只读示例页面及配置项（#160） ([6a92373](https://github.com/anyup/uView-Pro/commit/6a92373a6c8a1c2875b93d6dbb3985df34887c4e))
+- **u-textarea:** 新增click事件支持，在只读/非禁用状态下可触发点击回调，更新演示页面（#160） ([a79dc57](https://github.com/anyup/uView-Pro/commit/a79dc57262bfb3909d2f35bbf26589906e9a4c8d))
+- **u-field:** 新增readonly属性支持，设置后可点击但无法输入，调整disabled和readonly状态的遮罩逻辑与样式（#160） ([708f13b](https://github.com/anyup/uView-Pro/commit/708f13bb3601c0c77a0a75f1b4d1c148f28c7229))
+
+### 👥 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.6.3（2026-05-28）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-field/types.ts

@@ -56,6 +56,8 @@ export const FieldProps = {
     type: { type: String as PropType<InputType>, default: 'text' },
     /** 是否不可输入（默认false） */
     disabled: { type: Boolean, default: false },
+    /** 是否只读，禁止输入但可点击，样式不变，可触发click事件（默认false） */
+    readonly: { type: Boolean, default: false },
     /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
     maxlength: { type: [Number, String] as PropType<string | number>, default: 140 },
     /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */

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

@@ -1,7 +1,14 @@
 <template>
     <view
         class="u-field"
-        :class="[{ 'u-border-top': props.borderTop, 'u-border-bottom': props.borderBottom }, customClass]"
+        :class="[
+            {
+                'u-border-top': props.borderTop,
+                'u-border-bottom': props.borderBottom,
+                'u-field--disabled': props.disabled
+            },
+            customClass
+        ]"
         :style="$u.toStyle(customStyle)"
     >
         <view
@@ -40,6 +47,7 @@
                         :placeholder="String(props.placeholder)"
                         :placeholderStyle="props.placeholderStyle"
                         :disabled="props.disabled"
+                        :readonly="props.readonly"
                         :maxlength="inputMaxlength"
                         :focus="props.focus"
                         :autoHeight="props.autoHeight"
@@ -48,7 +56,6 @@
                         @blur="onBlur"
                         @focus="onFocus"
                         @confirm="onConfirm"
-                        @tap="fieldClick"
                     />
                     <!-- prettier-ignore -->
                     <input
@@ -61,6 +68,7 @@
                         :placeholder="String(props.placeholder)"
                         :placeholderStyle="props.placeholderStyle"
                         :disabled="props.disabled"
+                        :readonly="props.readonly"
                         :maxlength="inputMaxlength"
                         :focus="props.focus"
                         :confirmType="props.confirmType"
@@ -68,10 +76,9 @@
                         @blur="onBlur"
                         @input="onInput"
                         @confirm="onConfirm"
-                        @tap="fieldClick"
                     />
-                    <!-- 透明遮罩，只在disabled时显示，用于响应点击事件 -->
-                    <view v-if="props.disabled" class="u-field-disabled-overlay" @tap="fieldClick"></view>
+                    <!-- 透明遮罩，在disabled或readonly时显示，用于捕获点击事件（原生input设置disabled会阻止点击冒泡） -->
+                    <view v-if="props.readonly" class="u-field__readonly-overlay" @tap.stop="fieldClick"></view>
                 </view>
                 <u-icon
                     v-if="props.clearable && inputValue !== '' && focused && !props.disabled"
@@ -256,6 +263,7 @@ function rightIconClick() {
 }
 
 function fieldClick() {
+    if (props.disabled) return;
     emit('click');
 }
 </script>
@@ -366,7 +374,7 @@ function fieldClick() {
     position: relative;
 }
 
-.u-field-disabled-overlay {
+.u-field__readonly-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -375,4 +383,15 @@ function fieldClick() {
     background-color: transparent;
     z-index: 1;
 }
+
+.u-field--disabled {
+    background-color: $u-bg-gray-light;
+}
+
+.u-field--disabled .u-textarea-class,
+.u-field--disabled .u-field__input-wrap {
+    background-color: transparent;
+    color: $u-light-color;
+    -webkit-text-fill-color: $u-light-color;
+}
 </style>

package/components/u-input/types.ts

@@ -50,6 +50,11 @@ export const InputProps = {
         type: Boolean,
         default: false
     },
+    /** 是否只读，禁止输入但可点击，样式不变，可触发click事件(默认false) */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
     /** 输入框的最大可输入长度(默认140) */
     maxlength: {
         type: [Number, String] as PropType<number | string>,

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

@@ -24,6 +24,7 @@
             :placeholder="placeholder"
             :placeholderStyle="getPlaceholderStyle"
             :disabled="disabled"
+            :readonly="readonly"
             :maxlength="inputMaxlength"
             :fixed="fixed"
             :focus="focus"
@@ -49,6 +50,7 @@
             :placeholder="placeholder"
             :placeholderStyle="getPlaceholderStyle"
             :disabled="disabled || type === 'select'"
+            :readonly="readonly"
             :maxlength="inputMaxlength"
             :focus="focus"
             :confirmType="confirmType"
@@ -62,7 +64,8 @@
             @input="handleInput"
             @confirm="onConfirm"
         />
-        <view class="u-input__select-overlay" v-if="type === 'select'" @tap.stop="inputClick"></view>
+        <!-- 透明遮罩，在readonly时显示，用于捕获点击事件（原生input设置disabled会阻止点击冒泡） -->
+        <view v-if="readonly || type === 'select'" class="u-input__readonly-overlay" @tap.stop="inputClick"></view>
         <view class="u-input__right-icon u-flex">
             <view
                 class="u-input__right-icon__clear u-input__right-icon__item"
@@ -347,7 +350,7 @@ defineExpose({
     @include vue-flex;
     align-items: center;
 
-    &__select-overlay {
+    &__readonly-overlay {
         position: absolute;
         inset: 0;
         z-index: 1;

package/components/u-textarea/types.ts

@@ -55,6 +55,8 @@ export const TextareaProps = {
     confirmType: { type: String as PropType<string>, default: textarea.confirmType },
     // 是否禁用
     disabled: { type: Boolean as PropType<boolean>, default: textarea.disabled },
+    // 是否只读，禁止输入但可点击，样式不变，可触发click事件
+    readonly: { type: Boolean as PropType<boolean>, default: false },
     // 是否显示统计字数
     count: { type: Boolean as PropType<boolean>, default: textarea.count },
     // 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现

package/components/u-textarea/u-textarea.vue

@@ -3,7 +3,8 @@
         class="u-textarea"
         :class="[
             {
-                'u-textarea--error': validateState
+                'u-textarea--error': validateState,
+                'u-textarea--disabled': props.disabled
             },
             textareaClass,
             customClass
@@ -19,6 +20,7 @@
             :placeholder-style="getPlaceholderStyle"
             :placeholder-class="props.placeholderClass"
             :disabled="props.disabled"
+            :readonly="props.readonly"
             :focus="props.focus"
             :autoHeight="props.autoHeight"
             :fixed="props.fixed"
@@ -51,6 +53,8 @@
             {{ innerValue.length }}/{{ props.maxlength }}
         </text>
 
+        <!-- 透明遮罩，在readonly时显示，用于捕获点击事件（原生textarea设置disabled会阻止点击冒泡） -->
+        <view v-if="props.readonly" class="u-textarea__readonly-overlay" @tap.stop="textareaClick"></view>
         <view class="u-textarea__right-icon u-flex">
             <view
                 class="u-textarea__right-icon__clear u-textarea__right-icon__item"
@@ -132,7 +136,8 @@ const emit = defineEmits([
     'input',
     'confirm',
     'keyboardheightchange',
-    'change'
+    'change',
+    'click'
 ]);
 
 const { emitToParent } = useChildren('u-textarea', 'u-form-item');
@@ -359,6 +364,11 @@ function onClear(event: any) {
     valueChange();
 }
 
+function textareaClick() {
+    if (props.disabled) return;
+    emit('click');
+}
+
 defineExpose({
     onFormItemError
 });
@@ -374,6 +384,12 @@ defineExpose({
     @include flex;
     flex: 1;
 
+    &__readonly-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+    }
+
     &--border {
         border-radius: 4px;
         border: 1px solid $u-border-color;

package/package.json

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