uview-pro 0.6.3 → 0.6.5

package/components/u-select/u-select.vue

@@ -28,7 +28,7 @@
                         :hover-stay-time="150"
                         @tap="getResult('cancel')"
                     >
-                        {{ cancelText }}
+                        {{ getCancelText }}
                     </view>
                     <view class="u-select__header__title u-line-1"> {{ title }}</view>
                     <view
@@ -39,7 +39,7 @@
                         @touchmove.stop=""
                         @tap.stop="getResult('confirm')"
                     >
-                        {{ confirmText }}
+                        {{ getConfirmText }}
                     </view>
                 </view>
                 <view class="u-select__body">
@@ -86,7 +86,7 @@ export default {
 import { ref, computed, watch, nextTick } from 'vue';
 import { SelectProps } from './types';
 import type { SelectListItem } from '../../types/global';
-import { $u } from '../..';
+import { $u, useLocale } from '../..';
 
 /**
  * select 列选择器
@@ -112,8 +112,9 @@ import { $u } from '../..';
 
 const props = defineProps(SelectProps);
 const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'click']);
-// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
+const { t } = useLocale();
 
+// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
 const defaultSelector = ref<number[]>([0]);
 // picker-view的数据
 const columnData = ref<SelectListItem[][]>([]);
@@ -139,6 +140,10 @@ const popupValue = computed({
     set: (val: boolean) => emit('update:modelValue', val)
 });
 
+// 国际化计算属性
+const getCancelText = computed(() => props.cancelText || t('uSelect.cancelText'));
+const getConfirmText = computed(() => props.confirmText || t('uSelect.confirmText'));
+
 watch(
     () => props.modelValue,
     async val => {

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/components/u-upload/types.ts

@@ -1,8 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ImgMode, UploadSizeType, UploadSourceType, UploadAcceptType, UploadFileItem } from '../../types/global';
-import { useLocale } from '../../';
-
-const { t } = useLocale();
 
 /**
  * UploadProps upload props 类型定义
@@ -48,7 +45,7 @@ export const UploadProps = {
     /** 是否自定义上传按钮 */
     customBtn: { type: Boolean, default: false },
     /** 上传按钮文字 */
-    uploadText: { type: String, default: () => t('uUpload.uploadText') },
+    uploadText: { type: String, default: '' },
     /** 上传地址 */
     action: { type: String, default: '' },
     /** 是否禁用 */

package/components/u-upload/u-upload.vue

@@ -400,7 +400,7 @@ const extTypeMap: Record<string, string> = {
  */
 const uploadBtnText = computed(() => {
     // 如果用户自定义了 uploadText，优先使用
-    if (props.uploadText !== t('uUpload.uploadText')) {
+    if (props.uploadText) {
         return props.uploadText;
     }
     // 根据 accept 类型返回对应的国际化文本

package/components/u-verification-code/types.ts

@@ -1,7 +1,4 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { useLocale } from '../../';
-
-const { t } = useLocale();
 
 /**
  * VerificationCodeProps 验证码输入框 props 类型定义
@@ -21,11 +18,11 @@ export const VerificationCodeProps = {
     /** 倒计时时长，单位秒 */
     seconds: { type: [String, Number] as PropType<string | number>, default: 60 },
     /** 开始时按钮文字 */
-    startText: { type: String, default: () => t('uVerificationCode.startText') },
+    startText: { type: String, default: '' },
     /** 倒计时进行中按钮文字，X为剩余秒数 */
-    changeText: { type: String, default: () => t('uVerificationCode.changeText') },
+    changeText: { type: String, default: '' },
     /** 结束时按钮文字 */
-    endText: { type: String, default: () => t('uVerificationCode.endText') },
+    endText: { type: String, default: '' },
     /** 是否保持倒计时不中断（如页面切换） */
     keepRunning: { type: Boolean, default: false },
     /** 唯一标识key，用于区分多个验证码组件 */

package/components/u-verification-code/u-verification-code.vue

@@ -18,9 +18,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
 import { VerificationCodeProps } from './types';
-import { $u } from '../../';
+import { $u, useLocale } from '../../';
 
 /**
  * verificationCode 验证码输入框
@@ -38,9 +38,16 @@ import { $u } from '../../';
  * @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" />
  */
 
+const props = defineProps(VerificationCodeProps);
+
 const emit = defineEmits(['change', 'start', 'end']);
 
-const props = defineProps(VerificationCodeProps);
+const { t } = useLocale();
+
+// 国际化计算属性
+const getStartText = computed(() => props.startText || t('uVerificationCode.startText'));
+const getChangeText = computed(() => props.changeText || t('uVerificationCode.changeText'));
+const getEndText = computed(() => props.endText || t('uVerificationCode.endText'));
 
 /** 当前倒计时秒数 */
 const secNum = ref(Number(props.seconds));
@@ -75,7 +82,7 @@ onBeforeUnmount(() => {
 function checkKeepRunning() {
     // 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
     const lastTimestamp = Number(uni.getStorageSync(props.uniqueKey + '_$uCountDownTimestamp'));
-    if (!lastTimestamp) return changeEvent(props.startText);
+    if (!lastTimestamp) return changeEvent(getStartText.value);
     // 当前秒的时间戳
     const nowTimestamp = Math.floor(+new Date() / 1000);
     // 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
@@ -88,7 +95,7 @@ function checkKeepRunning() {
         start();
     } else {
         // 如果不存在需要继续上一次的倒计时，执行正常的逻辑
-        changeEvent(props.startText);
+        changeEvent(getStartText.value);
     }
 }
 
@@ -104,16 +111,16 @@ function start() {
     emit('start');
     canGetCode.value = false;
     // 一开始时就提示，否则要等setInterval的1秒后才会有提示
-    changeEvent(props.changeText.replace(/x|X/, String(secNum.value)));
+    changeEvent(getChangeText.value.replace(/x|X/, String(secNum.value)));
     setTimeToStorage();
     timer = setInterval(() => {
         if (--secNum.value) {
             // 用当前倒计时的秒数替换提示字符串中的"x"字母
-            changeEvent(props.changeText.replace(/x|X/, String(secNum.value)));
+            changeEvent(getChangeText.value.replace(/x|X/, String(secNum.value)));
         } else {
             clearInterval(timer!);
             timer = null;
-            changeEvent(props.endText);
+            changeEvent(getEndText.value);
             secNum.value = Number(props.seconds);
             emit('end');
             canGetCode.value = true;
@@ -129,7 +136,7 @@ function reset() {
     if (timer) clearInterval(timer);
     timer = null;
     secNum.value = Number(props.seconds);
-    changeEvent(props.endText);
+    changeEvent(getEndText.value);
 }
 
 /**

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.5",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",