Vue3 Input——一個多功能的輸入框

一、基本介紹

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

當輸入框的值發生變化時觸發，與事件不同的是，只有在焦點離開輸入框之後才會觸發。

四、自定義輸入校驗

為了方便用戶輸入，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的過程中，能夠發揮出自己的智慧和靈感，創造出更加美好的應用體驗。