vue实现input

Vue 实现 Input 组件的方法

在 Vue 中实现 input 组件可以通过多种方式，包括原生 HTML input 元素、自定义组件封装以及使用第三方库。以下是几种常见实现方式：

使用原生 HTML input 元素

<template>
  <input 
    v-model="inputValue"
    type="text"
    placeholder="请输入内容"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(event) {
      console.log('输入值:', event.target.value)
    },
    handleFocus() {
      console.log('获得焦点')
    },
    handleBlur() {
      console.log('失去焦点')
    }
  }
}
</script>

封装自定义 Input 组件

创建一个可复用的 Input 组件：

<!-- MyInput.vue -->
<template>
  <div class="my-input">
    <label v-if="label">{{ label }}</label>
    <input
      :value="value"
      :type="type"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.my-input {
  margin-bottom: 10px;
}
</style>

使用第三方 UI 库

Element UI 的 Input 组件示例：

<template>
  <el-input
    v-model="inputValue"
    placeholder="请输入内容"
    clearable
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

实现表单验证

结合 VeeValidate 实现表单验证：

<template>
  <div>
    <input 
      v-model="email"
      name="email"
      type="email"
      v-validate="'required|email'"
    />
    <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
  </div>
</template>

<script>
import { ValidationProvider } from 'vee-validate'

export default {
  data() {
    return {
      email: ''
    }
  }
}
</script>

实现自动完成功能

实现带自动完成功能的 Input：

<template>
  <div class="autocomplete">
    <input
      v-model="searchQuery"
      @input="onInputChange"
    />
    <ul v-if="suggestions.length">
      <li 
        v-for="(item, index) in suggestions"
        :key="index"
        @click="selectSuggestion(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    onInputChange() {
      // 这里可以调用API获取建议
      this.suggestions = ['建议1', '建议2', '建议3']
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.suggestions = []
    }
  }
}
</script>

这些方法涵盖了从基础到进阶的 Vue input 实现方式，可以根据项目需求选择合适的方案。