142 lines
4.0 KiB
TypeScript
142 lines
4.0 KiB
TypeScript
import type { PropType } from 'vue'
|
|
import { computed, defineComponent, ref } from 'vue'
|
|
import { getPrefixCls } from '../_utils/getPrefixCls'
|
|
import Icon from '../icon'
|
|
|
|
export default defineComponent({
|
|
name: 'Input',
|
|
props: {
|
|
modelValue: String,
|
|
size: {
|
|
type: String as PropType<'small' | 'medium' | 'large'>,
|
|
default: 'medium',
|
|
},
|
|
align: {
|
|
type: String as PropType<'left' | 'center' | 'right'>,
|
|
default: 'left',
|
|
},
|
|
placeholder: String,
|
|
disabled: Boolean,
|
|
readonly: Boolean,
|
|
clearable: Boolean,
|
|
prefixIcon: String,
|
|
suffixIcon: String,
|
|
showCount: Boolean,
|
|
maxlength: Number,
|
|
password: Boolean,
|
|
prepend: String,
|
|
append: String,
|
|
},
|
|
emits: ['update:modelValue'],
|
|
setup(props, { slots, emit }) {
|
|
const prefixCls = getPrefixCls('input')
|
|
const inputValue = ref(props.modelValue || '')
|
|
|
|
// 控制密码显示/隐藏
|
|
const showPassword = ref(false)
|
|
|
|
const updateValue = (val: string) => {
|
|
if (props.maxlength)
|
|
val = val.slice(0, props.maxlength)
|
|
inputValue.value = val
|
|
emit('update:modelValue', val)
|
|
}
|
|
|
|
const countText = computed(() => {
|
|
const len = inputValue.value.length
|
|
return props.maxlength ? `${len} / ${props.maxlength}` : `${len}`
|
|
})
|
|
|
|
const inputType = computed(() => {
|
|
if (!props.password)
|
|
return 'text'
|
|
return showPassword.value ? 'text' : 'password'
|
|
})
|
|
|
|
const inputWrapper = () => {
|
|
return (
|
|
<div
|
|
class={[
|
|
`${prefixCls}-wrapper`,
|
|
props.disabled && `${prefixCls}-disabled`,
|
|
props.readonly && `${prefixCls}-readonly`,
|
|
]}
|
|
>
|
|
{(slots.prefix || props.prefixIcon) && (
|
|
<div class={`${prefixCls}-prefix`}>
|
|
{slots.prefix?.() ?? <Icon icon={props.prefixIcon!} size={14} />}
|
|
</div>
|
|
)}
|
|
|
|
<input
|
|
class={`${prefixCls}-input ${prefixCls}-align-${props.align}`}
|
|
type={inputType.value}
|
|
value={inputValue.value}
|
|
placeholder={props.placeholder}
|
|
disabled={props.disabled}
|
|
readonly={props.readonly}
|
|
onInput={(e: Event) => updateValue((e.target as HTMLInputElement).value)}
|
|
/>
|
|
|
|
{props.clearable && inputValue.value && !props.disabled && !props.readonly && (
|
|
<span
|
|
class={`${prefixCls}-suffix`}
|
|
onClick={() => updateValue('')}
|
|
>
|
|
<Icon
|
|
class={`${prefixCls}-clear`}
|
|
icon="material-symbols:cancel-outline-rounded"
|
|
/>
|
|
</span>
|
|
|
|
)}
|
|
|
|
{/* 密码切换图标 */}
|
|
{props.password && (
|
|
<span
|
|
class={`${prefixCls}-suffix`}
|
|
onClick={() => (showPassword.value = !showPassword.value)}
|
|
>
|
|
<Icon icon={showPassword.value ? 'mage:eye-off' : 'mage:eye'} class={`${prefixCls}-password`} />
|
|
</span>
|
|
)}
|
|
|
|
{(slots.suffix || props.suffixIcon) && !props.password && (
|
|
<div class={`${prefixCls}-suffix`}>
|
|
{slots.suffix?.() ?? <Icon icon={props.suffixIcon!} size={14} />}
|
|
</div>
|
|
)}
|
|
|
|
{props.showCount && (
|
|
<span class={`${prefixCls}-count`}>{countText.value}</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return () => {
|
|
return (
|
|
<div class={`${prefixCls}-adornment ${prefixCls}-size-${props.size}`}>
|
|
{props.prepend || slots.prepend
|
|
? (
|
|
<div class={`${prefixCls}-adornment-prepend`}>
|
|
{slots.prepend?.() ?? (props.prepend && <span>{props.prepend}</span>)}
|
|
</div>
|
|
)
|
|
: null}
|
|
|
|
{inputWrapper()}
|
|
|
|
{props.append || slots.append
|
|
? (
|
|
<div class={`${prefixCls}-adornment-append`}>
|
|
{slots.append?.() ?? (props.append && <span>{props.append}</span>)}
|
|
</div>
|
|
)
|
|
: null}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
})
|