Vue3 Input——一个多功能的输入框

发布时间：2023-05-20

一、基本介绍

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(value);
    },
    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的过程中，能够发挥出自己的智慧和灵感，创造出更加美好的应用体验。

推荐文章