445 lines
14 KiB
Vue
445 lines
14 KiB
Vue
<template>
|
||
<view
|
||
class="u-input"
|
||
:class="[
|
||
{
|
||
'u-input--border': border,
|
||
'u-input--error': validateState,
|
||
'u-input--disabled': disabled
|
||
},
|
||
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="getPlaceholder"
|
||
:placeholderStyle="getPlaceholderStyle"
|
||
:disabled="disabled"
|
||
:readonly="readonly"
|
||
:inputmode="props.inputMode"
|
||
: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"
|
||
:confirm-hold="confirmHold"
|
||
@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="getPlaceholder"
|
||
:placeholderStyle="getPlaceholderStyle"
|
||
:disabled="disabled || type === 'select'"
|
||
:readonly="readonly"
|
||
:inputmode="props.inputMode"
|
||
:maxlength="inputMaxlength"
|
||
:focus="focus"
|
||
:confirmType="confirmType"
|
||
:cursor-spacing="getCursorSpacing"
|
||
:selection-end="Number(uSelectionEnd)"
|
||
:selection-start="Number(uSelectionStart)"
|
||
:show-confirm-bar="showConfirmbar"
|
||
:adjust-position="adjustPosition"
|
||
:confirm-hold="confirmHold"
|
||
@focus="onFocus"
|
||
@blur="handleBlur"
|
||
@input="handleInput"
|
||
@confirm="onConfirm"
|
||
/>
|
||
<!-- 透明遮罩，在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"
|
||
v-if="clearable && inputValue !== '' && !disabled"
|
||
:style="{ marginLeft: $u.addUnit(iconSpacing) }"
|
||
:class="{ 'u-hidden': !focused && type !== 'select' }"
|
||
@click.stop="onClear"
|
||
>
|
||
<u-icon :size="currentIconSize" 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'"
|
||
:style="{ marginLeft: $u.addUnit(iconSpacing) }"
|
||
>
|
||
<u-icon
|
||
:size="currentIconSize"
|
||
: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
|
||
}"
|
||
:style="{ marginLeft: $u.addUnit(iconSpacing) }"
|
||
>
|
||
<u-icon name="arrow-down-fill" :size="selectIconSize" 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, useLocale } from '../..';
|
||
import { InputProps } from './types';
|
||
import type { SizeType } from '../../types/global';
|
||
import uIcon from '../u-icon/u-icon.vue';
|
||
|
||
const props = defineProps(InputProps);
|
||
const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'confirm', 'click', 'clear']);
|
||
|
||
const { t } = useLocale();
|
||
|
||
const { emitToParent } = useChildren('u-input', 'u-form-item');
|
||
const { parentExposed } = useChildren('u-input', 'u-form');
|
||
|
||
const validateState = ref(props.validateState); // 当前input的验证状态，用于错误时，边框是否改为红色
|
||
const focused = ref(false); // 当前是否处于获得焦点的状态
|
||
const showPassword = ref(false); // 是否预览密码
|
||
const lastValue = ref(''); // 用于头条小程序，判断@input中，前后的值是否发生了变化
|
||
|
||
// 根据 size 定义不同的配置
|
||
const sizeConfig = {
|
||
small: {
|
||
inputHeight: 56,
|
||
textareaHeight: 70,
|
||
fontSize: 24,
|
||
iconSize: 28,
|
||
iconSpacing: 6
|
||
},
|
||
default: {
|
||
inputHeight: 70,
|
||
textareaHeight: 100,
|
||
fontSize: 28,
|
||
iconSize: 32,
|
||
iconSpacing: 10
|
||
},
|
||
large: {
|
||
inputHeight: 84,
|
||
textareaHeight: 130,
|
||
fontSize: 32,
|
||
iconSize: 36,
|
||
iconSpacing: 14
|
||
}
|
||
};
|
||
|
||
// 获取实际使用的 size 值（优先级：props.size > u-form.size）
|
||
const actualSize = computed(() => {
|
||
// 优先使用 props 的 size 属性
|
||
if (props.size !== '') {
|
||
return String(props.size);
|
||
}
|
||
// 次优先：使用 u-form 的 size 属性（u-form 的 size 只支持预设值）
|
||
if (parentExposed.value?.props?.size) {
|
||
return String(parentExposed.value.props.size);
|
||
}
|
||
// 默认值
|
||
return 'default';
|
||
});
|
||
|
||
// 判断实际使用的 size 是否在预设配置中
|
||
const isInSizeConfig = computed(() => actualSize.value in sizeConfig);
|
||
|
||
// 获取预设 size（用于查找 sizeConfig 配置，如图标大小、高度等）
|
||
const presetSize = computed(() => {
|
||
return (isInSizeConfig.value ? actualSize.value : 'default') as SizeType;
|
||
});
|
||
|
||
// 获取当前尺寸配置
|
||
const currentSizeConfig = computed(() => sizeConfig[presetSize.value]);
|
||
|
||
// 获取实际要使用的 font-size（如果是预设值使用配置值，否则作为自定义值处理）
|
||
const actualFontSize = computed(() => {
|
||
if (isInSizeConfig.value) {
|
||
return $u.addUnit(currentSizeConfig.value.fontSize);
|
||
}
|
||
// 自定义size值，直接作为fontSize处理
|
||
return $u.addUnit(actualSize.value);
|
||
});
|
||
|
||
// 计算当前图标大小
|
||
const currentIconSize = computed(() => currentSizeConfig.value.iconSize);
|
||
|
||
// 计算 select 图标大小（比常规图标稍小）
|
||
const selectIconSize = computed(() => currentSizeConfig.value.iconSize - 4);
|
||
|
||
// 计算图标间距
|
||
const iconSpacing = computed(() => currentSizeConfig.value.iconSpacing);
|
||
|
||
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
|
||
? $u.addUnit(props.height)
|
||
: props.type === 'textarea'
|
||
? $u.addUnit(currentSizeConfig.value.textareaHeight)
|
||
: $u.addUnit(currentSizeConfig.value.inputHeight);
|
||
// 根据 size 属性设置字体大小
|
||
style.fontSize = actualFontSize.value;
|
||
return $u.toStyle(style, props.customStyle);
|
||
});
|
||
|
||
const getPlaceholderStyle = computed(() => {
|
||
return $u.toStyle(
|
||
{
|
||
fontSize: actualFontSize.value
|
||
},
|
||
props.placeholderStyle
|
||
);
|
||
});
|
||
|
||
// 计算光标与键盘的距离
|
||
const getCursorSpacing = computed(() => Number(props.cursorSpacing));
|
||
// 光标起始位置
|
||
const uSelectionStart = computed(() => String(props.selectionStart));
|
||
// 光标结束位置
|
||
const uSelectionEnd = computed(() => String(props.selectionEnd));
|
||
// placeholder 国际化
|
||
const getPlaceholder = computed(() => props.placeholder || t('uInput.placeholder'));
|
||
|
||
/**
|
||
* 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);
|
||
}
|
||
emit('clear');
|
||
handleInput({ detail: { value: '' } });
|
||
}
|
||
|
||
function inputClick() {
|
||
if (props.disabled) return;
|
||
emit('click');
|
||
}
|
||
|
||
defineExpose({
|
||
onFormItemError
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../../libs/css/style.components.scss';
|
||
|
||
.u-input {
|
||
position: relative;
|
||
flex: 1;
|
||
@include vue-flex;
|
||
align-items: center;
|
||
|
||
&__readonly-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
&__input {
|
||
//height: 70rpx;
|
||
font-size: 28rpx;
|
||
color: $u-main-color;
|
||
flex: 1;
|
||
align-self: center;
|
||
line-height: normal;
|
||
}
|
||
|
||
&__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: 3;
|
||
}
|
||
|
||
&--border {
|
||
border-radius: 4px;
|
||
border: 1px solid $u-border-color;
|
||
}
|
||
|
||
&--error {
|
||
border-color: $u-type-error !important;
|
||
}
|
||
|
||
&--disabled {
|
||
background-color: $u-bg-gray-light;
|
||
}
|
||
|
||
&--disabled &__input {
|
||
background-color: transparent;
|
||
color: $u-light-color;
|
||
-webkit-text-fill-color: $u-light-color;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
&--disabled &__textarea {
|
||
background-color: transparent;
|
||
color: $u-light-color;
|
||
-webkit-text-fill-color: $u-light-color;
|
||
padding-left: 10rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
&__right-icon {
|
||
position: relative;
|
||
z-index: 3;
|
||
|
||
&--select {
|
||
transition: transform 0.4s;
|
||
|
||
&--reverse {
|
||
transform: rotate(-180deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|