vue实现建议提示

Vue 实现建议提示的方法

使用 v-model 和计算属性

通过 v-model 绑定输入框的值，结合计算属性实现建议提示功能。计算属性根据输入内容过滤建议列表。

<template>
  <div>
    <input v-model="inputValue" @input="handleInput" />
    <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 {
      inputValue: '',
      suggestionList: ['Apple', 'Banana', 'Orange', 'Grape'],
      suggestions: []
    }
  },
  methods: {
    handleInput() {
      if (this.inputValue) {
        this.suggestions = this.suggestionList.filter(item =>
          item.toLowerCase().includes(this.inputValue.toLowerCase())
        )
      } else {
        this.suggestions = []
      }
    },
    selectSuggestion(item) {
      this.inputValue = item
      this.suggestions = []
    }
  }
}
</script>

使用第三方组件库

Element UI 或 Vuetify 等 UI 库提供了现成的自动完成组件，可以快速实现建议提示功能。

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      suggestionList: ['Apple', 'Banana', 'Orange', 'Grape']
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.suggestionList.filter(item =>
            item.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.suggestionList
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

使用自定义指令

创建自定义指令实现建议提示功能，提高代码复用性。

Vue.directive('suggest', {
  bind(el, binding, vnode) {
    const input = el.querySelector('input')
    const list = el.querySelector('ul')
    const suggestions = binding.value

    input.addEventListener('input', () => {
      const value = input.value.toLowerCase()
      if (value) {
        const filtered = suggestions.filter(item =>
          item.toLowerCase().includes(value)
        )
        list.innerHTML = filtered
          .map(item => `<li>${item}</li>`)
          .join('')
        list.style.display = 'block'
      } else {
        list.style.display = 'none'
      }
    })

    list.addEventListener('click', e => {
      if (e.target.tagName === 'LI') {
        input.value = e.target.textContent
        list.style.display = 'none'
      }
    })
  }
})

使用 Vuex 管理状态

当建议提示功能需要跨组件共享数据时，可以使用 Vuex 管理状态。

// store.js
export default new Vuex.Store({
  state: {
    inputValue: '',
    suggestions: []
  },
  mutations: {
    updateInput(state, value) {
      state.inputValue = value
    },
    updateSuggestions(state, list) {
      state.suggestions = list
    }
  },
  actions: {
    fetchSuggestions({ commit, state }) {
      if (state.inputValue) {
        const filtered = ['Apple', 'Banana', 'Orange'].filter(item =>
          item.toLowerCase().includes(state.inputValue.toLowerCase())
        )
        commit('updateSuggestions', filtered)
      } else {
        commit('updateSuggestions', [])
      }
    }
  }
})

这些方法可以根据项目需求选择使用，自定义实现提供了最大灵活性，而第三方组件库则能快速实现功能。