名字筛选用vue实现

实现名字筛选的Vue组件

创建一个Vue组件来实现名字筛选功能，需要包含输入框和筛选结果展示。以下是一个基本实现方案：

<template>
  <div class="name-filter">
    <input 
      v-model="searchQuery" 
      placeholder="输入名字进行筛选" 
      class="filter-input"
    />
    <ul class="name-list">
      <li 
        v-for="name in filteredNames" 
        :key="name"
        class="name-item"
      >
        {{ name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      names: ['张三', '李四', '王五', '赵六', '钱七']
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter(name => 
        name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

<style>
.filter-input {
  padding: 8px;
  width: 200px;
  margin-bottom: 10px;
}
.name-list {
  list-style: none;
  padding: 0;
}
.name-item {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>

优化筛选功能

对于更复杂的筛选需求，可以添加以下改进：

computed: {
  filteredNames() {
    const query = this.searchQuery.trim().toLowerCase()
    if (!query) return this.names

    return this.names.filter(name => {
      const lowerName = name.toLowerCase()
      // 支持拼音首字母匹配
      const pinyinMatch = this.getPinyinInitials(name).toLowerCase().includes(query)
      // 支持完整拼音匹配
      const fullPinyinMatch = this.getFullPinyin(name).toLowerCase().includes(query)

      return lowerName.includes(query) || pinyinMatch || fullPinyinMatch
    })
  }
},
methods: {
  getPinyinInitials(name) {
    // 实现汉字转拼音首字母逻辑
    // 可以使用第三方库如pinyin-pro
    return 'zslwq' // 示例返回值
  },
  getFullPinyin(name) {
    // 实现汉字转完整拼音逻辑
    return 'zhangsan lisi wangwu zhaoliu qianqi' // 示例返回值
  }
}

集成第三方拼音库

要实现更准确的汉字拼音转换，可以集成第三方库：

安装pinyin-pro：

npm install pinyin-pro

在组件中使用：

import { pinyin } from 'pinyin-pro'

methods: {
  getPinyinInitials(name) {
    return pinyin(name, { pattern: 'first', toneType: 'none' })
  },
  getFullPinyin(name) {
    return pinyin(name, { toneType: 'none' })
  }
}

添加性能优化

对于大型名字列表，可以添加防抖和虚拟滚动：

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      names: [], // 大型名字数组
      displayNames: []
    }
  },
  created() {
    this.debouncedFilter = debounce(this.updateDisplayNames, 300)
  },
  watch: {
    filteredNames: {
      handler() {
        this.debouncedFilter()
      },
      immediate: true
    }
  },
  methods: {
    updateDisplayNames() {
      // 实现虚拟滚动逻辑，只显示可见区域的名字
      this.displayNames = this.filteredNames.slice(0, 50)
    }
  }
}

完整组件示例

结合上述所有改进的完整组件示例：

<template>
  <div class="name-filter-container">
    <div class="search-box">
      <input
        v-model="searchQuery"
        placeholder="输入名字/拼音筛选"
        class="search-input"
        @input="handleInput"
      />
      <span class="result-count">{{ filteredNames.length }}个结果</span>
    </div>

    <div class="name-list-container">
      <virtual-list
        :size="40"
        :remain="10"
        :items="filteredNames"
      >
        <template v-slot="{ item }">
          <div class="name-item">
            {{ item }}
            <span class="pinyin-hint">({{ getFullPinyin(item) }})</span>
          </div>
        </template>
      </virtual-list>
    </div>
  </div>
</template>

<script>
import { pinyin } from 'pinyin-pro'
import { debounce } from 'lodash'
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  },
  data() {
    return {
      searchQuery: '',
      names: [] // 从API或其他来源加载
    }
  },
  computed: {
    filteredNames() {
      const query = this.searchQuery.trim().toLowerCase()
      if (!query) return this.names

      return this.names.filter(name => {
        const lowerName = name.toLowerCase()
        const initials = this.getPinyinInitials(name).toLowerCase()
        const fullPinyin = this.getFullPinyin(name).toLowerCase()

        return lowerName.includes(query) || 
               initials.includes(query) || 
               fullPinyin.includes(query)
      })
    }
  },
  methods: {
    getPinyinInitials(name) {
      return pinyin(name, { pattern: 'first', toneType: 'none' })
    },
    getFullPinyin(name) {
      return pinyin(name, { toneType: 'none' })
    },
    handleInput: debounce(function() {
      // 处理输入变化
    }, 300)
  }
}
</script>

<style>
/* 添加适当的样式 */
</style>

这个实现包含了基本的筛选功能、拼音支持、性能优化和良好的用户体验。可以根据实际需求调整和扩展功能。