324 lines
9.7 KiB
Vue
324 lines
9.7 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="u-input"
|
|||
|
|
:class="[
|
|||
|
|
{
|
|||
|
|
'u-input--border': border,
|
|||
|
|
'u-input--error': validateState
|
|||
|
|
},
|
|||
|
|
customClass
|
|||
|
|
]"
|
|||
|
|
:style="{
|
|||
|
|
padding: type === 'textarea' ? (border ? '20rpx' : '0') : `0 ${border ? 20 : 0}rpx`,
|
|||
|
|
borderColor: borderColor,
|
|||
|
|
textAlign: inputAlign
|
|||
|
|
}"
|
|||
|
|
@tap.stop="inputClick"
|
|||
|
|
>
|
|||
|
|
<textarea
|
|||
|
|
v-if="type == 'textarea'"
|
|||
|
|
class="u-input__input u-input__textarea"
|
|||
|
|
:style="getStyle"
|
|||
|
|
:value="inputValue"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
:placeholderStyle="placeholderStyle"
|
|||
|
|
:disabled="disabled"
|
|||
|
|
:maxlength="inputMaxlength"
|
|||
|
|
:fixed="fixed"
|
|||
|
|
:focus="focus"
|
|||
|
|
:autoHeight="autoHeight"
|
|||
|
|
:selection-end="Number(uSelectionEnd)"
|
|||
|
|
:selection-start="Number(uSelectionStart)"
|
|||
|
|
:cursor-spacing="getCursorSpacing"
|
|||
|
|
:show-confirm-bar="showConfirmbar"
|
|||
|
|
:adjust-position="adjustPosition"
|
|||
|
|
@input="handleInput"
|
|||
|
|
@blur="handleBlur"
|
|||
|
|
@focus="onFocus"
|
|||
|
|
@confirm="onConfirm"
|
|||
|
|
/>
|
|||
|
|
<!-- prettier-ignore -->
|
|||
|
|
<input
|
|||
|
|
v-else
|
|||
|
|
class="u-input__input"
|
|||
|
|
:type="((type == 'password' ? 'text' : type) as any)"
|
|||
|
|
:style="getStyle"
|
|||
|
|
:value="inputValue"
|
|||
|
|
:password="type == 'password' && !showPassword"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
:placeholderStyle="placeholderStyle"
|
|||
|
|
:disabled="disabled || type === 'select'"
|
|||
|
|
:maxlength="inputMaxlength"
|
|||
|
|
:focus="focus"
|
|||
|
|
:confirmType="confirmType"
|
|||
|
|
:cursor-spacing="getCursorSpacing"
|
|||
|
|
:selection-end="Number(uSelectionEnd)"
|
|||
|
|
:selection-start="Number(uSelectionStart)"
|
|||
|
|
:show-confirm-bar="showConfirmbar"
|
|||
|
|
:adjust-position="adjustPosition"
|
|||
|
|
@focus="onFocus"
|
|||
|
|
@blur="handleBlur"
|
|||
|
|
@input="handleInput"
|
|||
|
|
@confirm="onConfirm"
|
|||
|
|
/>
|
|||
|
|
<view class="u-input__select-overlay" v-if="type === 'select'" @tap.stop="inputClick"></view>
|
|||
|
|
<view class="u-input__right-icon u-flex">
|
|||
|
|
<view
|
|||
|
|
class="u-input__right-icon__clear u-input__right-icon__item"
|
|||
|
|
v-if="clearable && inputValue !== '' && !disabled"
|
|||
|
|
@click.stop="onClear"
|
|||
|
|
>
|
|||
|
|
<u-icon size="32" name="close-circle-fill" color="var(--u-light-color)" />
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="u-input__right-icon__clear u-input__right-icon__item"
|
|||
|
|
v-if="passwordIcon && type == 'password'"
|
|||
|
|
>
|
|||
|
|
<u-icon
|
|||
|
|
size="32"
|
|||
|
|
:name="!showPassword ? 'eye' : 'eye-fill'"
|
|||
|
|
color="var(--u-light-color)"
|
|||
|
|
@click="showPassword = !showPassword"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="u-input__right-icon--select u-input__right-icon__item"
|
|||
|
|
v-if="type == 'select'"
|
|||
|
|
:class="{
|
|||
|
|
'u-input__right-icon--select--reverse': selectOpen
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<u-icon name="arrow-down-fill" size="26" color="var(--u-light-color)"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text
|
|||
|
|
class="u-input__count"
|
|||
|
|
:style="{
|
|||
|
|
'background-color': props.disabled ? 'transparent' : 'var(--u-bg-white)'
|
|||
|
|
}"
|
|||
|
|
v-if="props.type === 'textarea' && props.count"
|
|||
|
|
>
|
|||
|
|
{{ inputValue.length }}/{{ props.maxlength }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'u-input',
|
|||
|
|
options: {
|
|||
|
|
addGlobalClass: true,
|
|||
|
|
// #ifndef MP-TOUTIAO
|
|||
|
|
virtualHost: true,
|
|||
|
|
// #endif
|
|||
|
|
styleIsolation: 'shared'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, watch } from 'vue';
|
|||
|
|
import { $u, useChildren } from '../..';
|
|||
|
|
import { InputProps } from './types';
|
|||
|
|
|
|||
|
|
const props = defineProps(InputProps);
|
|||
|
|
const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confirm', 'click']);
|
|||
|
|
|
|||
|
|
const { emitToParent } = useChildren('u-input', 'u-form-item');
|
|||
|
|
|
|||
|
|
const inputHeight = 70; // input的高度
|
|||
|
|
const textareaHeight = 100; // textarea的高度
|
|||
|
|
const validateState = ref(props.validateState); // 当前input的验证状态，用于错误时，边框是否改为红色
|
|||
|
|
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(
|
|||
|
|
() => inputValue.value,
|
|||
|
|
(nVal, oVal) => {
|
|||
|
|
// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
|
|||
|
|
if (nVal != oVal && props.type == 'select') handleInput({ detail: { value: nVal } });
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 监听 validateState 变化
|
|||
|
|
watch(
|
|||
|
|
() => props.validateState,
|
|||
|
|
val => {
|
|||
|
|
validateState.value = val;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
const inputMaxlength = computed(() => Number(props.maxlength));
|
|||
|
|
|
|||
|
|
const getStyle = computed(() => {
|
|||
|
|
let style: Record<string, any> = {};
|
|||
|
|
// 如果没有自定义高度，就根据type为input还是textarea来分配一个默认的高度
|
|||
|
|
style.minHeight = props.height
|
|||
|
|
? props.height + 'rpx'
|
|||
|
|
: props.type == 'textarea'
|
|||
|
|
? `${textareaHeight}rpx`
|
|||
|
|
: `${inputHeight}rpx`;
|
|||
|
|
return $u.toStyle(style, props.customStyle);
|
|||
|
|
});
|
|||
|
|
const getCursorSpacing = computed(() => Number(props.cursorSpacing));
|
|||
|
|
// 光标起始位置
|
|||
|
|
const uSelectionStart = computed(() => String(props.selectionStart));
|
|||
|
|
// 光标结束位置
|
|||
|
|
const uSelectionEnd = computed(() => String(props.selectionEnd));
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* change 事件
|
|||
|
|
* @param event
|
|||
|
|
*/
|
|||
|
|
function handleInput(event: any) {
|
|||
|
|
let value = event.detail.value;
|
|||
|
|
// 判断是否去除空格
|
|||
|
|
if (props.trim) value = $u.trim(value);
|
|||
|
|
emit('update:modelValue', value);
|
|||
|
|
emit('input', value);
|
|||
|
|
// 过一个生命周期再发送事件给u-form-item，否则this.$emit('update:modelValue')更新了父组件的值，但是微信小程序上
|
|||
|
|
// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
|
|||
|
|
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
if ($u.trim(value) == lastValue.value) return;
|
|||
|
|
lastValue.value = value;
|
|||
|
|
// #endif
|
|||
|
|
// 通过 emitter 派发事件
|
|||
|
|
emitToParent('onFormChange', value);
|
|||
|
|
}, 40);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* blur 事件
|
|||
|
|
* @param event
|
|||
|
|
*/
|
|||
|
|
function handleBlur(event: any) {
|
|||
|
|
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
|
|||
|
|
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
|
|||
|
|
setTimeout(() => {
|
|||
|
|
focused.value = false;
|
|||
|
|
}, 100);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
let value = inputValue.value;
|
|||
|
|
emit('blur', value);
|
|||
|
|
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
|||
|
|
// #ifdef MP-TOUTIAO
|
|||
|
|
if ($u.trim(value) == lastValue.value) return;
|
|||
|
|
lastValue.value = value;
|
|||
|
|
// #endif
|
|||
|
|
emitToParent('onFormBlur', value);
|
|||
|
|
}, 40);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFormItemError(status: boolean) {
|
|||
|
|
validateState.value = status;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFocus(e: any) {
|
|||
|
|
focused.value = true;
|
|||
|
|
emit('focus', e.detail.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onConfirm(e: any) {
|
|||
|
|
emit('confirm', e.detail.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClear(event: any) {
|
|||
|
|
try {
|
|||
|
|
event.stopPropagation();
|
|||
|
|
} catch (e) {
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
handleInput({ detail: { value: '' } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function inputClick() {
|
|||
|
|
emit('click');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({
|
|||
|
|
onFormItemError
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '../../libs/css/style.components.scss';
|
|||
|
|
|
|||
|
|
.u-input {
|
|||
|
|
position: relative;
|
|||
|
|
flex: 1;
|
|||
|
|
@include vue-flex;
|
|||
|
|
|
|||
|
|
&__select-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__input {
|
|||
|
|
//height: 70rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__textarea {
|
|||
|
|
width: auto;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
// padding: 10rpx 0;
|
|||
|
|
line-height: normal;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__count {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 1px;
|
|||
|
|
bottom: 0;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
background-color: var(--u-bg-white);
|
|||
|
|
padding: 1px 4px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
line-height: 16px;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--border {
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid $u-border-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--error {
|
|||
|
|
border-color: $u-type-error !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&__right-icon {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
|
|||
|
|
&__item {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&--select {
|
|||
|
|
transition: transform 0.4s;
|
|||
|
|
|
|||
|
|
&--reverse {
|
|||
|
|
transform: rotate(-180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|