uview-ultra-plus 1.0.0

package/uview-ultra/components/up-input/up-input.uvue

@@ -0,0 +1,545 @@
+<template>
+    <view class="up-input" :class="inputClass" :style="[wrapperStyle, $up.addStyle(customStyle)]">
+        <view class="up-input__content">
+            <view
+                class="up-input__content__prefix-icon"
+                v-if="prefixIcon != '' || $slots['prefix'] != null"
+            >
+                <slot name="prefix">
+                    <up-icon
+                        :name="prefixIcon"
+                        size="18"
+                        :customStyle="prefixIconStyle"
+                    ></up-icon>
+                </slot>
+            </view>
+            <view class="up-input__content__field-wrapper" @tap="clickHandler">
+				<!-- 根据uni-app的input组件文档，H5和APP中只要声明了password参数(无论true还是false)，type均失效，此时
+					为了防止type=number时，又存在password属性，type无效，此时需要设置password为undefined
+				 -->
+            	<input
+                    ref="inputNativeRef"
+            	    class="up-input__content__field-wrapper__field"
+            	    :style="[inputStyle]"
+            	    :type="type"
+            	    :focus="focus"
+            	    :cursor="cursor"
+            	    :value="innerValue"
+            	    :auto-blur="autoBlur"
+            	    :disabled="disabled || readonly"
+            	    :maxlength="maxlength"
+            	    :placeholder="placeholder"
+            	    :placeholder-style="placeholderStyle"
+            	    :placeholder-class="placeholderClass"
+            	    :confirm-type="confirmType"
+            	    :confirm-hold="confirmHold"
+            	    :hold-keyboard="holdKeyboard"
+            	    :cursor-spacing="cursorSpacing"
+            	    :adjust-position="adjustPosition"
+            	    :selection-end="selectionEnd"
+            	    :selection-start="selectionStart"
+            	    :password="password || type === 'password' || false"
+                    :ignoreCompositionEvent="ignoreCompositionEvent"
+            	    @input="onInput"
+            	    @blur="onBlur"
+            	    @focus="onFocus"
+            	    @confirm="onConfirm"
+            	    @keyboardheightchange="onkeyboardheightchange"
+            	/>
+            </view>
+            <view
+                class="up-input__content__clear"
+                v-if="isShowClear"
+                @click="onClear"
+            >
+                <up-icon
+                    name="close"
+                    size="11"
+                    color="#ffffff"
+                    customStyle="line-height: 12px"
+                ></up-icon>
+            </view>
+            <view
+                class="up-input__content__subfix-icon"
+                v-if="suffixIcon != '' || $slots['suffix'] != null"
+            >
+                <slot name="suffix">
+                    <up-icon
+                        :name="suffixIcon"
+                        size="18"
+                        :customStyle="suffixIconStyle"
+                    ></up-icon>
+                </slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+import type { ComponentPublicInstance, PropType } from 'vue'
+import { ref, computed, watch, getCurrentInstance } from 'vue'
+import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+import { addStyle, addUnit, deepMerge, formValidate, sleep, os } from '../../libs/function/index'
+import defProps from './input.uts'
+
+const instance = getCurrentInstance()!.proxy!
+
+// options
+defineOptions({
+  name: 'up-input'
+})
+
+// props
+const props = defineProps({
+    // 绑定的值
+    modelValue: {
+        type: [String, Number],
+        default: defProps.getString('input.value')
+    },
+    // number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
+    // idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序
+    // digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序
+    // text-文本输入键盘
+    type: {
+        type: String,
+        default: defProps.getString('input.type')
+    },
+    // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，
+    // 兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序
+    fixed: {
+        type: Boolean,
+        default: defProps.getBoolean('input.fixed')
+    },
+    // 是否禁用输入框
+    disabled: {
+        type: Boolean,
+        default: defProps.getBoolean('input.disabled')
+    },
+    // 禁用状态时的背景色
+    disabledColor: {
+        type: String,
+        default: defProps.getString('input.disabledColor')
+    },
+    // 是否显示清除控件
+    clearable: {
+        type: Boolean,
+        default: defProps.getBoolean('input.clearable')
+    },
+    // 是否密码类型
+    password: {
+        type: Boolean,
+        default: defProps.getBoolean('input.password')
+    },
+    // 最大输入长度，设置为 -1 的时候不限制最大长度
+    maxlength: {
+        type: [String, Number],
+        default: defProps.getNumber('input.maxlength')
+    },
+    // 	输入框为空时的占位符
+    placeholder: {
+        type: String,
+        default: defProps.getString('input.placeholder')
+    },
+    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+    placeholderClass: {
+        type: String,
+        default: defProps.getString('input.placeholderClass')
+    },
+    // 指定placeholder的样式
+    placeholderStyle: {
+        type: [String, Object],
+        default: defProps.getString('input.placeholderStyle')
+    },
+    // 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效
+    showWordLimit: {
+        type: Boolean,
+        default: defProps.getBoolean('input.showWordLimit')
+    },
+    // 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档
+    // https://uniapp.dcloud.io/component/input
+    // https://uniapp.dcloud.io/component/textarea
+    confirmType: {
+        type: String,
+        default: defProps.getString('input.confirmType')
+    },
+    // 点击键盘右下角按钮时是否保持键盘不收起，H5无效
+    confirmHold: {
+        type: Boolean,
+        default: defProps.getBoolean('input.confirmHold')
+    },
+    // focus时，点击页面的时候不收起键盘，微信小程序有效
+    holdKeyboard: {
+        type: Boolean,
+        default: defProps.getBoolean('input.holdKeyboard')
+    },
+    // 自动获取焦点
+    // 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
+    focus: {
+        type: Boolean,
+        default: defProps.getBoolean('input.focus')
+    },
+    // 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
+    autoBlur: {
+        type: Boolean,
+        default: defProps.getBoolean('input.autoBlur')
+    },
+    // 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效
+    disableDefaultPadding: {
+        type: Boolean,
+        default: defProps.getBoolean('input.disableDefaultPadding')
+    },
+    // 指定focus时光标的位置
+    cursor: {
+        type: [String, Number],
+        default: defProps.getNumber('input.cursor')
+    },
+    // 输入框聚焦时底部与键盘的距离
+    cursorSpacing: {
+        type: [String, Number],
+        default: defProps.getNumber('input.cursorSpacing')
+    },
+    // 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+    selectionStart: {
+        type: [String, Number],
+        default: defProps.getNumber('input.selectionStart')
+    },
+    // 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+    selectionEnd: {
+        type: [String, Number],
+        default: defProps.getNumber('input.selectionEnd')
+    },
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+        type: Boolean,
+        default: defProps.getBoolean('input.adjustPosition')
+    },
+    // 输入框内容对齐方式，可选值为：left|center|right
+    inputAlign: {
+        type: String,
+        default: defProps.getString('input.inputAlign')
+    },
+    // 输入框字体的大小
+    fontSize: {
+        type: [String, Number],
+        default: defProps.getString('input.fontSize')
+    },
+    // 输入框字体颜色
+    color: {
+        type: String,
+        default: defProps.getString('input.color')
+    },
+    // 输入框前置图标
+    prefixIcon: {
+        type: String,
+        default: defProps.getString('input.prefixIcon')
+    },
+    // 前置图标样式，对象或字符串
+    prefixIconStyle: {
+        type: [String, Object],
+        default: defProps.getString('input.prefixIconStyle')
+    },
+    // 输入框后置图标
+    suffixIcon: {
+        type: String,
+        default: defProps.getString('input.suffixIcon')
+    },
+    // 后置图标样式，对象或字符串
+    suffixIconStyle: {
+        type: [String, Object],
+        default: defProps.getString('input.suffixIconStyle')
+    },
+    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
+    border: {
+        type: String,
+        default: defProps.getString('input.border')
+    },
+    // 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
+    readonly: {
+        type: Boolean,
+        default: defProps.getBoolean('input.readonly')
+    },
+    // 输入框形状，circle-圆形，square-方形
+    shape: {
+        type: String,
+        default: defProps.getString('input.shape')
+    },
+    // 用于处理或者过滤输入框内容的方法
+    formatter: {
+        type: [Function],
+        default: () => {
+			return (val: any) => {
+				return val
+			}
+		}
+    },
+    // 是否忽略组件内对文本合成系统事件的处理
+    ignoreCompositionEvent: {
+        type: Boolean,
+        default: defProps.getBoolean('input.ignoreCompositionEvent')
+    }
+})
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'change', 'confirm', 'clear', 'keyboardheightchange'])
+
+// 响应式数据
+const clearInput = ref(false)
+const innerValue = ref<string|number>('')
+const focused = ref(false)
+const firstChange = ref(true)
+const changeFromInner = ref(false)
+const defaultFormat = function(value: string): string {
+    return value
+}
+const innerFormatter = ref(defaultFormat)
+
+// 内容发生变化，进行处理
+const valueChange = function(val: any, isOut: boolean) {
+    if(clearInput.value) {
+        innerValue.value = '';
+        clearInput.value = false;
+    }
+    setTimeout(() => {
+        if (!isOut || clearInput.value) {
+            // 标识value值的变化是由内部引起的
+            changeFromInner.value = true;
+            emit("change", val.toString());
+            emit("update:modelValue", val.toString());
+        }
+
+        // 尝试调用up-form的验证方法
+        formValidate(instance, "change");
+    }, 0);
+}
+
+// 监听modelValue的变化
+watch((): any => props.modelValue, (newVal: any, oldVal: string|number) => {
+    if (changeFromInner.value || innerValue.value == newVal) {
+        changeFromInner.value = false // 重要否则会出现双向绑定失效问题https://github.com/ijry/uview-plus/issues/419
+        return
+    }
+    innerValue.value = newVal
+    // 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
+    if (
+        firstChange.value == false &&
+        changeFromInner.value == false
+    ) {
+        valueChange(innerValue.value, true)
+    } else {
+        // 尝试调用up-form的验证方法
+        if(!firstChange.value) formValidate(instance, "change");
+    }
+    firstChange.value = false
+    // 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
+    changeFromInner.value = false
+}, { immediate: true })
+
+// 是否显示清除控件
+const isShowClear = computed(() => {
+    return !!props.clearable && !props.readonly && !!focused.value && innerValue.value !== "";
+})
+
+// 组件的类名
+const inputClass = computed(() => {
+    let classes: string[] = []
+    if (props.border === "surround") {
+        (classes = classes.concat(["up-border", "up-input--radius"]))
+    }
+    classes.push(`up-input--${props.shape}`);
+    if (props.border === "bottom") {
+        (classes = classes.concat([
+            "up-border-bottom",
+            "up-input--no-radius",
+        ]))
+    }
+    return classes.join(" ")
+})
+
+// 组件的样式
+const wrapperStyle = computed(() => {
+    const style = {};
+    // 禁用状态下，被背景色加上对应的样式
+    if (props.disabled) {
+        style['backgroundColor'] = props.disabledColor
+    }
+    // 无边框时，去除内边距
+    if (props.border === "none") {
+        style['padding'] = "0"
+    } else {
+        style['paddingTop'] = "6px"
+        style['paddingBottom'] = "6px"
+        style['paddingLeft'] = "9px"
+        style['paddingRight'] = "9px"
+    }
+    return deepMerge(style, {})
+})
+
+// 输入框的样式
+const inputStyle = computed(() => {
+    const style = {
+        color: props.color,
+        fontSize: addUnit(props.fontSize),
+        textAlign: props.inputAlign
+    };
+    return style;
+})
+
+// 当键盘输入时，触发input事件
+const onInput = (e: UniInputEvent) => {
+    let { value } = e.detail;
+    // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+    console.log('onInput', value, innerValue.value)
+    innerValue.value = value;
+    setTimeout(() => {
+		// todo
+        // let formatValue: string = innerFormatter.value(value);
+        // innerValue.value = formatValue;
+        // valueChange(formatValue);
+        valueChange(value.toString(), false);
+    }, 0)
+}
+
+// 输入框失去焦点时触发
+const onBlur = (event: UniInputBlurEvent) => {
+    emit("blur", event.detail.value);
+    // H5端的blur会先于点击清除控件的点击click事件触发，导致focused
+    // 瞬间为false，从而隐藏了清除控件而无法被点击到
+    // sleep(150).then(() => {
+        focused.value = false;
+    // });
+    // 尝试调用up-form的验证方法
+    formValidate(instance, "blur");
+}
+
+// 输入框聚焦时触发
+const onFocus = (event: UniInputFocusEvent) => {
+    focused.value = true;
+    emit("focus");
+}
+
+// 点击完成按钮时触发
+const onConfirm = (event: UniInputConfirmEvent) => {
+    emit("confirm", innerValue.value);
+}
+
+// 键盘高度发生变化的时候触发此事件
+// 兼容性：微信小程序2.7.0+、App 3.1.0+
+const onkeyboardheightchange = (event: UniInputKeyboardHeightChangeEventDetail) => {
+    emit("keyboardheightchange", event);
+}
+
+// 点击清除控件
+const onClear = () => {
+    clearInput.value = true;
+    innerValue.value = "";
+    setTimeout(() => {
+        valueChange("", false);
+        emit("clear");
+    }, 0);
+}
+
+/**
+ * 在安卓nvue上，事件无法冒泡
+ * 在某些时间，我们希望监听up-from-item的点击事件，此时会导致点击up-form-item内的up-input后
+ * 无法触发up-form-item的点击事件，这里通过手动调用up-form-item的方法进行触发
+ */
+const clickHandler = () => {
+    // if (os() === "android") {
+    //     const formItem = $parent.call(this, "up-form-item");
+    //     if (formItem) {
+    //         formItem.clickHandler();
+    //     }
+    // }
+}
+
+const inputNativeRef = ref(null)
+
+const doFocus = () => {
+	if (inputNativeRef.value != null) {
+		(inputNativeRef.value as ComponentPublicInstance)?.$callMethod('focus')
+	}
+}
+
+const doBlur = () => {
+	if (inputNativeRef.value != null) {
+		(inputNativeRef.value as ComponentPublicInstance)?.$callMethod('blur')
+	}
+}
+
+// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+const setFormatter = (e: (val: string) => string) => {
+    innerFormatter.value = e
+}
+
+onMounted(() => {
+    // 初始化时设置innerValue
+    innerValue.value = props.modelValue
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.up-input {
+    @include flex(row);
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+
+    &--radius,
+    &--square {
+        border-radius: 4px;
+    }
+
+    &--no-radius {
+        border-radius: 0;
+    }
+
+    &--circle {
+        border-radius: 100px;
+    }
+
+    &__content {
+        flex: 1;
+        @include flex(row);
+        align-items: center;
+        justify-content: space-between;
+
+        &__field-wrapper {
+            position: relative;
+            @include flex(row);
+            margin: 0;
+            flex: 1;
+			
+			&__field {
+				line-height: 26px;
+				text-align: left;
+				color: $up-main-color;
+				height: 24px;
+				font-size: 15px;
+				flex: 1;
+			}
+        }
+
+        &__clear {
+            width: 20px;
+            height: 20px;
+            border-radius: 100px;
+            background-color: #c6c7cb;
+            @include flex(row);
+            align-items: center;
+            justify-content: center;
+            transform: scale(0.82);
+            margin-left: 4px;
+        }
+
+        &__subfix-icon {
+            margin-left: 4px;
+        }
+
+        &__prefix-icon {
+            margin-right: 4px;
+        }
+    }
+}
+</style>