vue实现菜单搜索

实现菜单搜索功能

在Vue中实现菜单搜索功能需要结合数据过滤和动态渲染。以下是具体实现方法：

基础实现方案

数据准备

data() {
  return {
    menuItems: [
      { id: 1, name: '首页', path: '/' },
      { id: 2, name: '产品', path: '/products' },
      { id: 3, name: '服务', path: '/services' },
      { id: 4, name: '关于我们', path: '/about' }
    ],
    searchQuery: ''
  }
}

模板部分

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索菜单..." />
    <ul>
      <li v-for="item in filteredMenu" :key="item.id">
        <a :href="item.path">{{ item.name }}</a>
      </li>
    </ul>
  </div>
</template>

计算属性过滤

computed: {
  filteredMenu() {
    return this.menuItems.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

高级实现方案（支持嵌套菜单）

数据结构调整

data() {
  return {
    menuItems: [
      {
        id: 1,
        name: '产品',
        children: [
          { id: 11, name: '手机' },
          { id: 12, name: '电脑' }
        ]
      },
      {
        id: 2,
        name: '服务',
        children: [
          { id: 21, name: '技术支持' },
          { id: 22, name: '咨询服务' }
        ]
      }
    ],
    searchQuery: ''
  }
}

递归过滤方法

methods: {
  filterMenu(items) {
    return items.filter(item => {
      if (item.children) {
        const filteredChildren = this.filterMenu(item.children)
        return (
          item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          filteredChildren.length > 0
        )
      }
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

计算属性调整

computed: {
  filteredMenu() {
    return this.filterMenu(this.menuItems)
  }
}

性能优化建议

防抖处理

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

模板调整

<input @input="e => handleSearch(e.target.value)" placeholder="搜索菜单..." />

样式增强

添加搜索状态样式

.search-highlight {
  background-color: yellow;
  font-weight: bold;
}

高亮匹配文本

methods: {
  highlightText(text) {
    if (!this.searchQuery) return text
    const regex = new RegExp(this.searchQuery, 'gi')
    return text.replace(regex, match => `<span class="search-highlight">${match}</span>`)
  }
}

模板使用

<li v-for="item in filteredMenu" :key="item.id">
  <a :href="item.path" v-html="highlightText(item.name)"></a>
</li>

完整组件示例

<template>
  <div class="menu-search">
    <input 
      v-model="searchQuery" 
      placeholder="搜索菜单..." 
      class="search-input"
    />
    <ul class="menu-list">
      <li 
        v-for="item in filteredMenu" 
        :key="item.id" 
        class="menu-item"
      >
        <a 
          :href="item.path" 
          v-html="highlightText(item.name)"
          class="menu-link"
        ></a>
        <ul v-if="item.children" class="submenu">
          <li 
            v-for="child in item.children" 
            :key="child.id"
            class="submenu-item"
          >
            <a 
              :href="child.path" 
              v-html="highlightText(child.name)"
              class="submenu-link"
            ></a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      menuItems: [
        // 菜单数据
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredMenu() {
      return this.filterMenu(this.menuItems)
    }
  },
  methods: {
    filterMenu(items) {
      // 递归过滤方法
    },
    highlightText(text) {
      // 高亮文本方法
    },
    handleSearch: debounce(function(query) {
      this.searchQuery = query
    }, 300)
  }
}
</script>

<style>
/* 样式定义 */
</style>

以上方案可根据实际需求进行调整，支持平级菜单和嵌套菜单的搜索功能，并提供了性能优化和用户体验增强的建议。