一、基本介绍
Vue3 Input是一个基于Vue3的多功能输入框组件，可以支持多种输入类型和自定义功能，如输入校验、下拉选项、联想输入等等。由于使用了Vue3的Composition API，使用起来方便简单，同时还提供了非常友好的交互体验和自定义功能接口。
二、常用属性
Vue3 Input提供了以下常用属性：
<template>
<Vue3Input
v-model="inputValue"
placeholder="请输入内容"
:disabled="isDisabled"
:readonly="isReadonly"
:maxlength="maxLen"
:showClear="showClearBtn"
:showPwd="showPassword"
:inputType="inputType"
:options="selectOptions"
@input="handleInput"
@blur="handleBlur"
@focus="handleFocus"
@change="handleChange"
/>
</template>
<script>
import { ref } from 'vue';
import Vue3Input from './Vue3Input.vue';
export default {
components: { Vue3Input },
setup() {
const inputValue = ref('');
const isDisabled = ref(false);
const isReadonly = ref(false);
const maxLen = ref(100);
const showClearBtn = ref(false);
const showPassword = ref(false);
const inputType = ref('text');
const selectOptions = ref([]);
const handleInput = (value) => {
console.log(value);
};
const handleBlur = () => {
console.log('blur');
};
const handleFocus = () => {
console.log('focus');
};
const handleChange = () => {
console.log('change');
};
return {
inputValue,
isDisabled,
isReadonly,
maxLen,
showClearBtn,
showPassword,
inputType,
selectOptions,
handleInput,
handleBlur,
handleFocus,
handleChange,
};
},
};
</script>
1. v-model
用于绑定输入框的值，一般应该与数据源中的变量双向绑定来实现数据更新。
2. placeholder
输入框的默认文本提示语，当输入框无内容时会显示该提示文本。
3. disabled
是否禁用输入框，当值为true时无法输入内容，同时会应用一定的样式提示用户无法进行输入。
4. readonly
是否只读，当值为true时无法编辑，但可以进行选取、复制等操作，同时会应用一定的样式提示用户只能进行阅读。
5. maxlength
输入框的最大长度，超过该长度的输入将会被截取。
6. showClearBtn
是否显示清空按钮，用于一键清除输入框中的内容。
7. showPassword
是否显示密码，用于输入密码等保密内容，将把输入内容显示为星号或点号等符号。
8. inputType
输入框的类型，支持文本、数字、电话等多种类型，还可以自定义设置，根据类型来进行校验和渲染不同的键盘。
9. options
下拉选项，用于提供选择列表，用户可以从列表中选择一个值填充到输入框中。
三、事件说明
Vue3 Input提供了以下常用事件：
<template>
<Vue3Input
...
@input="handleInput"
@blur="handleBlur"
@focus="handleFocus"
@change="handleChange"
/>
</template>
<script>
export default {
methods: {
handleInput(value) {
console.log(vlue);
},
handleBlur() {
console.log('blur');
},
handleFocus() {
console.log('focus');
},
handleChange() {
console.log('change');
},
},
};
</script>
1. input
当用户输入字符时触发，用于更新输入框的值。
2. blur
当输入框失去焦点时触发，用于保存用户输入的内容，同时可能进行校验等操作。
3. focus
当输入框获得焦点时触发，用于提示用户当前正在输入该输入框。
4. change
当输入框的值发生变化时触发，与<input>事件不同的是，只有在焦点离开输入框之后才会触发。
四、自定义输入校验
为了方便用户输入，Vue3 Input提供了很多自带的校验规则，如数字、邮箱、电话等，可以非常方便地进行设置。同时，也支持自定义校验规则，以满足不同业务场景的需求。
1. 内置校验规则举例：
<template>
<Vue3Input
...
v-model="inputValue"
:inputType="inputType"
:validator="phoneValidator"
/>
</template>
<script>
export default {
setup() {
const inputValue = ref('');
const inputType = ref('tel');
const phoneValidator = (val) => {
const reg = /^1[34578]\d{9}$/;
if (!reg.test(val)) {
return '请输入正确的手机号码';
}
return true;
};
return {
inputValue,
inputType,
phoneValidator,
};
},
};
</script>
2. 自定义校验规则：
<template>
<Vue3Input
...
v-model="inputValue"
:validator="customValidator"
/>
</template>
<script>
export default {
setup() {
const inputValue = ref('');
const customValidator = (val) => {
if (val.trim() === '') {
return '内容不能为空';
} else if (val.length < 4) {
return '内容长度不能小于4';
} else {
return true;
}
};
return {
inputValue,
customValidator,
};
},
};
</script>
五、自定义下拉列表选项
为了提供更加友好的用户输入体验，Vue3 Input提供了下拉选项的功能，可以在输入框下方展示一组选项供用户选择。同时，也支持自定义选项，以满足不同的业务需求。
1. 内置下拉选项举例：
<template>
<Vue3Input
...
:options="selectOptions"
/>
</template>
<script>
export default {
setup() {
const selectOptions = [
'选项1',
'选项2',
'选项3',
...
];
return {
selectOptions,
};
},
};
</script>
2. 自定义下拉选项：
<template>
<Vue3Input
...
:options="customOptions"
/>
</template>
<script>
export default {
setup() {
const customOptions = [
{
label: '选项1',
value: 1,
},
{
label: '选项2',
value: 2,
},
{
label: '选项3',
value: 3,
},
...
];
return {
customOptions,
};
},
};
</script>
六、结束语
Vue3 Input是一个多功能的输入框组件，提供了非常丰富的功能和事件，并且通过自定义校验规则和下拉列表选项，可以满足各种不同业务场景的需求。希望本文能为大家带来一些参考和帮助，同时也希望大家在使用Vue3 Input的过程中，能够发挥出自己的智慧和灵感，创造出更加美好的应用体验。
