闲暇之余写了一个input组件
预览
HTML
<template>
<div class="ui-input">
<div class="title">
<span>{{ title }}</span>
</div>
<div class="value">
<textarea
v-if="type == 'textarea'"
class="textarea"
:value="modelValue"
:rows="rows"
:placeholder="placeholder"
@input="inputHandler"
@focus="focusHandler"
@blur="blurHandler"
/>
<input v-else
:type="type"
password
:value="modelValue"
class="input"
:placeholder="placeholder"
:disabled="disabled"
autocomplete="off"
@input="inputHandler"
@focus="focusHandler"
@blur="blurHandler"
>
</div>
</div>
</template>
TypeScript
const props = withDefaults(
defineProps<{
rows?: string,
title?: string,
type?: string,
disabled?: boolean,
placeholder?: string,
modelValue?: any
}>(),
{
rows: '',
title: '',
type: 'text',
disabled: false,
placeholder: '',
modelValue: ''
}
)
const emits = defineEmits<{
(e: 'update:modelValue', modelValue: any): void,
(e: 'change', modelValue: any): void,
(e: 'blur', modelValue: any): void,
(e: 'focus', modelValue: any): void
}>()
const inputEl = ref()
const controlChange: any = inject('usuuu', '')
const controlChangeEvent = (val: any, type?: string) => {
controlChange && controlChange(val, type)
}
const blurHandler = (e: Event) => {
emits('blur', e)
const { value } = e.target as HTMLInputElement
controlChangeEvent(value as any, 'blur' as string)
}
const focusHandler = (e: Event) => {
emits('focus', e)
const { value } = e.target as HTMLInputElement
controlChangeEvent(value, 'focus')
}
const inputHandler = (e: Event) => {
const { value } = e.target as HTMLInputElement
emits('update:modelValue', value)
controlChangeEvent(value, 'change')
}
const focus = () => {
inputEl.value.focus()
}
const blur = () => {
inputEl.value.blur()
}
watch(() => props.modelValue, (v: any) => {
controlChangeEvent(v, 'mounted')
})
onMounted(() => {
controlChangeEvent(props.modelValue, 'mounted')
})
defineExpose({ blur, focus })
less
.ui-input {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px;
line-height: 24px;
background-color: #fff;
&:after {
position: absolute;
box-sizing: border-box;
content: " ";
pointer-events: none;
right: 16px;
bottom: 0;
left: 16px;
border-bottom: 1px solid #ebedf0;
transform: scaleY(.5);
}
.title {
width: 6.2em;
font-size: 13px;
flex: none;
margin-right: 12px;
box-sizing: border-box;
text-align: left;
word-wrap: break-word;
}
.value {
font-size: 13px;
.input {
display: block;
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
color: #707070;
line-height: inherit;
text-align: left;
border: 0;
resize: none;
user-select: auto;
background-color: transparent;
}
.input::-webkit-input-placeholder {
color: #c8c9cc
}
.input::placeholder {
color: #c8c9cc
}
}
.textarea {
display: block;
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
color: #747474;
line-height: inherit;
text-align: left;
background-color: transparent;
border: 0;
resize: none;
user-select: auto;
}
.textarea::-webkit-input-placeholder {
color: #c8c9cc
}
.textarea::placeholder {
color: #c8c9cc
}
}
例子
<ui-input v-model="vlaue" title="邮箱" placeholder="请输入邮箱" />
<ui-input v-model="vlaue" title="密码" type="password" placeholder="请输入密码" />
<ui-input v-model="vlaue" title="禁用" disabled placeholder="禁用不可输入" />
<ui-input v-model="vlaue" title="textarea" type="textarea" rows="3" placeholder="textarea" />
API
参数 | 说明 | 类型 |
---|---|---|
v-model | 当前输入的值 | number/string |
title | 标题 | string |
disabled | 是否禁用 | boolean |
type | 类型(textarea/password) | string |
rows | 类型为textarea设置 | string |
placeholder | 简介 | string |
© 未经允许禁止转载
…喝醉de鱼oO
10天前
IP属地福建省
非常棒!