uview-pro 0.3.6 → 0.3.8

package/components/u-form/u-form.vue

@@ -19,7 +19,7 @@ export default {
 
 <script setup lang="ts">
 import { FormProps } from './types';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { $u, useParent } from '../..';
 
 /**
@@ -41,6 +41,11 @@ const props = defineProps(FormProps);
 
 useParent('u-form');
 
+interface ErrorItem {
+    prop: string;
+    message: string;
+}
+
 // 存储当前form下的所有u-form-item的实例
 const fields = ref<any[]>([]);
 
@@ -69,15 +74,15 @@ function resetFields() {
  * @param callback 校验回调
  * @returns Promise<boolean>
  */
-function validate(callback?: (valid: boolean) => void): Promise<boolean> {
+function validate(callback?: (valid: boolean, errorArr: ErrorItem[]) => void): Promise<boolean> {
     return new Promise(resolve => {
         // 对所有的u-form-item进行校验
         let valid = true; // 默认通过
         let count = 0; // 用于标记是否检查完毕
-        let errorArr: any[] = []; // 存放错误信息
+        let errorArr: ErrorItem[] = []; // 存放错误信息
         if (fields.value.length === 0) {
             resolve(true);
-            if (typeof callback === 'function') callback(true);
+            if (typeof callback === 'function') callback(true, []);
             return;
         }
         // 调用每一个u-form-item实例的validation的校验方法
@@ -87,7 +92,7 @@ function validate(callback?: (valid: boolean) => void): Promise<boolean> {
                 field.validation('', (error: any) => {
                     if (error) {
                         valid = false;
-                        errorArr.push(error);
+                        errorArr.push({ prop: field.prop, message: error });
                     }
                     // 当历遍了所有的u-form-item时，调用promise的then方法
                     if (++count === fields.value.length) {
@@ -96,12 +101,12 @@ function validate(callback?: (valid: boolean) => void): Promise<boolean> {
                         if (
                             props.errorType.indexOf('none') === -1 &&
                             props.errorType.indexOf('toast') >= 0 &&
-                            errorArr.length
+                            errorArr.length > 0
                         ) {
-                            $u.toast(errorArr[0]);
+                            errorArr[0].message && $u.toast(errorArr[0].message);
                         }
                         // 调用回调方法
-                        if (typeof callback === 'function') callback(valid);
+                        if (typeof callback === 'function') callback(valid, errorArr);
                     }
                 });
         });
@@ -121,7 +126,7 @@ defineExpose({
     fields,
     rules,
     props,
-    model: props.model
+    model: computed(() => props.model)
 });
 </script>
 

package/components/u-form-item/u-form-item.vue

@@ -269,7 +269,7 @@ function getFilteredRule(triggerType = '') {
  */
 function validation(trigger: string, callback: (msg: string) => void = () => {}) {
     // 检验之前，先获取需要校验的值
-    fieldValue.value = parentExposed?.value?.model?.[props.prop];
+    fieldValue.value = parentExposed?.value?.model?.value[props.prop];
     // blur和change是否有当前方式的校验规则
     let rules = getFilteredRule(trigger);
     // 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为
@@ -295,11 +295,14 @@ function validation(trigger: string, callback: (msg: string) => void = () => {})
  * 清空当前的u-form-item
  */
 function resetField() {
-    if (parentExposed?.value?.model && props.prop) {
-        parentExposed.value.model[props.prop] = initialValue.value;
+    if (parentExposed?.value?.model?.value && props.prop) {
+        parentExposed.value.model.value[props.prop] = initialValue.value;
     }
     // 设置为`success`状态，只是为了清空错误标记
-    validateState.value = 'success';
+    // 延时50毫秒，如果立即清空状态，则无法清空错误标记
+    setTimeout(() => {
+        validateState.value = 'success';
+    }, 50);
 }
 
 // 组件挂载时注册到父表单
@@ -322,7 +325,7 @@ onMounted(() => {
                     });
                 errorType.value = parentExposed?.value?.errorType || errorType.value;
                 // 设置初始值
-                fieldValue.value = parentExposed?.value?.model?.[props.prop];
+                fieldValue.value = parentExposed?.value?.model?.value[props.prop];
                 // 设置初始值
                 initialValue.value = fieldValue.value;
             }
@@ -355,7 +358,7 @@ defineExpose({
     font-size: 28rpx;
     color: $u-main-color;
     box-sizing: border-box;
-    line-height: $u-form-item-height;
+    // line-height: $u-form-item-height;
     flex-direction: column;
 
     &__border-bottom--error:after {

package/components/u-index-list/u-index-list.vue

@@ -95,7 +95,7 @@ const stickyOffsetTop = ref(0);
 // 弹出toast的z-index值
 const alertZIndex = computed(() => $u.zIndex.toast).value;
 // indexList 响应式
-const indexList = computed(() => props.indexList ?? getIndexList()).value;
+const indexList = computed(() => props?.indexList ?? getIndexList());
 const zIndex = computed(() => props.zIndex).value;
 const activeColor = computed(() => props.activeColor).value;
 
@@ -278,7 +278,7 @@ function scrollToAnchor(index: number) {
         return;
     }
     scrollToAnchorIndex.value = index;
-    const anchor = children.find(item => item.getExposed().props.index === indexList[index]);
+    const anchor = children.find(item => item.getExposed().props.index === indexList.value[index]);
     if (anchor) {
         emit('select', anchor.getExposed().props.index);
         uni.pageScrollTo({

package/components/u-input/types.ts

@@ -39,6 +39,11 @@ export const InputProps = {
         type: [Number, String] as PropType<number | string>,
         default: 140
     },
+    // 是否显示统计字数，仅textarea有效
+    count: {
+        type: Boolean,
+        default: false
+    },
     /** placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;") */
     placeholderStyle: {
         type: String,

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

@@ -9,7 +9,7 @@
             customClass
         ]"
         :style="{
-            padding: `0 ${border ? 20 : 0}rpx`,
+            padding: type === 'textarea' ? (border ? '20rpx' : '0') : `0 ${border ? 20 : 0}rpx`,
             borderColor: borderColor,
             textAlign: inputAlign
         }"
@@ -88,6 +88,15 @@
                 <u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
             </view>
         </view>
+        <text
+            class="u-input__count"
+            :style="{
+                'background-color': props.disabled ? 'transparent' : '#fff'
+            }"
+            v-if="props.type === 'textarea' && props.count"
+        >
+            {{ String(defaultValue).length }}/{{ props.maxlength }}
+        </text>
     </view>
 </template>
 
@@ -167,10 +176,10 @@ function handleInput(event: any) {
     let value = event.detail.value;
     // 判断是否去除空格
     if (props.trim) value = $u.trim(value);
-    emit('update:modelValue', value);
-    emit('input', value);
     // 当前model 赋值
     defaultValue.value = value;
+    emit('update:modelValue', value);
+    emit('input', value);
     // 过一个生命周期再发送事件给u-form-item，否则this.$emit('update:modelValue')更新了父组件的值，但是微信小程序上
     // 尚未更新到u-form-item，导致获取的值为空，从而校验混论
     // 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
@@ -192,12 +201,12 @@ function handleInput(event: any) {
 function handleBlur(event: any) {
     // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
     // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
-    let value = event.detail.value;
     setTimeout(() => {
         focused.value = false;
     }, 100);
-    emit('blur', value);
     setTimeout(() => {
+        let value = String(defaultValue.value);
+        emit('blur', value);
         // 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
         // #ifdef MP-TOUTIAO
         if ($u.trim(value) == lastValue.value) return;
@@ -226,7 +235,7 @@ function onClear(event: any) {
     } catch (e) {
         console.log(e);
     }
-    emit('update:modelValue', '');
+    handleInput({ detail: { value: '' } });
 }
 
 function inputClick() {
@@ -257,13 +266,24 @@ defineExpose({
         width: auto;
         font-size: 28rpx;
         color: $u-main-color;
-        padding: 10rpx 0;
+        // padding: 10rpx 0;
         line-height: normal;
         flex: 1;
     }
 
+    &__count {
+        position: absolute;
+        right: 1px;
+        bottom: 0;
+        font-size: 12px;
+        color: $u-tips-color;
+        background-color: #ffffff;
+        padding: 1px 4px;
+        border-radius: 10px;
+        line-height: 16px;
+    }
+
     &--border {
-        border-radius: 6rpx;
         border-radius: 4px;
         border: 1px solid $u-form-item-border-color;
     }

package/components/u-text/u-text.vue

@@ -22,10 +22,12 @@
             :class="['u-text__price', props.type && `u-text__value--${props.type}`]"
             :style="textValueStyle"
         >
-            ￥{{ displayValue }}
+            <slot>￥{{ displayValue }}</slot>
         </text>
         <!-- link 模式 -->
-        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>{{ displayValue }}</u-link>
+        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>
+            <slot>{{ displayValue }}</slot>
+        </u-link>
         <template v-else-if="props.openType && isMp">
             <button
                 class="u-reset-button u-text__value"
@@ -46,7 +48,7 @@
                 :show-message-card="props.showMessageCard"
                 :app-parameter="props.appParameter"
             >
-                {{ displayValue }}
+                <slot>{{ displayValue }}</slot>
             </button>
         </template>
         <!-- 默认模式 -->
@@ -56,7 +58,7 @@
             :style="textValueStyle"
             :class="[props.type && `u-text__value--${props.type}`, props.lines ? `u-line-${props.lines}` : '']"
         >
-            {{ displayValue }}
+            <slot>{{ displayValue }}</slot>
         </text>
         <!-- 后缀图标 -->
         <view class="u-text__icon u-text__suffix-icon" v-if="props.suffixIcon">

package/components/u-textarea/types.ts

@@ -0,0 +1,88 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+const textarea = {
+    value: '',
+    placeholder: '',
+    placeholderClass: 'input-placeholder',
+    placeholderStyle: 'color: #c0c4cc',
+    height: '100rpx',
+    confirmType: 'done',
+    disabled: false,
+    count: false,
+    focus: false,
+    autoHeight: false,
+    fixed: false,
+    cursorSpacing: 0,
+    cursor: '',
+    showConfirmBar: true,
+    selectionStart: -1,
+    selectionEnd: -1,
+    adjustPosition: true,
+    disableDefaultPadding: false,
+    holdKeyboard: false,
+    maxlength: 140,
+    border: 'surround',
+    formatter: null
+};
+
+export const TextareaProps = {
+    ...baseProps,
+    // 输入框的内容
+    modelValue: { type: [String, Number] as PropType<string | number>, default: textarea.value },
+    // 输入框为空时占位符
+    placeholder: { type: [String, Number] as PropType<string | number>, default: textarea.placeholder },
+    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+    placeholderClass: { type: String as PropType<string>, default: textarea.placeholderClass },
+    // 指定placeholder的样式
+    placeholderStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: textarea.placeholderStyle
+    },
+    // 输入框高度
+    height: { type: [String, Number] as PropType<string | number>, default: textarea.height },
+    // 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效
+    confirmType: { type: String as PropType<string>, default: textarea.confirmType },
+    // 是否禁用
+    disabled: { type: Boolean as PropType<boolean>, default: textarea.disabled },
+    // 是否显示统计字数
+    count: { type: Boolean as PropType<boolean>, default: textarea.count },
+    // 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现
+    focus: { type: Boolean as PropType<boolean>, default: textarea.focus },
+    // 是否自动增加高度
+    autoHeight: { type: Boolean as PropType<boolean>, default: textarea.autoHeight },
+    // 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true
+    fixed: { type: Boolean as PropType<boolean>, default: textarea.fixed },
+    // 指定光标与键盘的距离
+    cursorSpacing: { type: Number as PropType<number>, default: textarea.cursorSpacing },
+    // 指定focus时的光标位置
+    cursor: { type: [String, Number] as PropType<string | number>, default: textarea.cursor },
+    // 是否显示键盘上方带有”完成“按钮那一栏，
+    showConfirmBar: { type: Boolean as PropType<boolean>, default: textarea.showConfirmBar },
+    // 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+    selectionStart: { type: Number as PropType<number>, default: textarea.selectionStart },
+    // 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+    selectionEnd: { type: Number as PropType<number>, default: textarea.selectionEnd },
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: { type: Boolean as PropType<boolean>, default: textarea.adjustPosition },
+    // 是否去掉 iOS 下的默认内边距，只微信小程序有效
+    disableDefaultPadding: { type: Boolean as PropType<boolean>, default: textarea.disableDefaultPadding },
+    // focus时，点击页面的时候不收起键盘，只微信小程序有效
+    holdKeyboard: { type: Boolean as PropType<boolean>, default: textarea.holdKeyboard },
+    // 最大输入长度，设置为 -1 的时候不限制最大长度
+    maxlength: { type: [String, Number] as PropType<string | number>, default: textarea.maxlength },
+    // 边框类型，surround-四周边框，bottom-底部边框
+    border: { type: [String, Boolean] as PropType<string | boolean>, default: textarea.border },
+    // 用于处理或者过滤输入框内容的方法
+    formatter: { type: Function as PropType<((val: any) => any) | null>, default: textarea.formatter },
+    // 是否忽略组件内对文本合成系统事件的处理
+    ignoreCompositionEvent: { type: Boolean as PropType<boolean>, default: true },
+    /** 是否可清空(默认true) */
+    clearable: { type: Boolean, default: true },
+    /** 输入框的验证状态，用于错误时，边框是否改为红色 */
+    validateState: { type: Boolean, default: false }
+};
+
+export type TextareaProps = ExtractPropTypes<typeof TextareaProps>;
+
+export default TextareaProps;