vue实现搜索和替换

Vue 实现搜索功能

在 Vue 中实现搜索功能通常需要结合 v-model 和计算属性或方法。以下是一个基本实现方式：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

Vue 实现替换功能

替换功能通常需要遍历数据并修改匹配项。以下是实现方式：

<template>
  <div>
    <input v-model="searchTerm" placeholder="搜索内容" />
    <input v-model="replaceTerm" placeholder="替换为" />
    <button @click="replaceAll">全部替换</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      replaceTerm: '',
      items: ['Vue', 'React', 'Angular', 'Vuex', 'Vue Router']
    }
  },
  methods: {
    replaceAll() {
      this.items = this.items.map(item => 
        item.replace(new RegExp(this.searchTerm, 'gi'), this.replaceTerm)
      )
    }
  }
}
</script>

高级搜索替换组件

对于更复杂的场景，可以创建一个可复用的搜索替换组件：

<template>
  <div class="search-replace">
    <div class="search-box">
      <input v-model="searchText" placeholder="搜索..." />
      <input v-model="replaceText" placeholder="替换为..." />
      <button @click="performReplace">替换</button>
    </div>
    <div class="content" v-html="highlightedContent"></div>
  </div>
</template>

<script>
export default {
  props: {
    content: String
  },
  data() {
    return {
      searchText: '',
      replaceText: '',
      currentContent: this.content
    }
  },
  computed: {
    highlightedContent() {
      if (!this.searchText) return this.currentContent
      const regex = new RegExp(this.searchText, 'gi')
      return this.currentContent.replace(regex, match => 
        `<span class="highlight">${match}</span>`
      )
    }
  },
  methods: {
    performReplace() {
      if (!this.searchText) return
      const regex = new RegExp(this.searchText, 'gi')
      this.currentContent = this.currentContent.replace(regex, this.replaceText)
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
}
</style>

使用第三方库

对于更强大的搜索替换功能，可以考虑使用专门的库：

import Fuse from 'fuse.js'

// 在Vue组件中
methods: {
  setupFuse() {
    this.fuse = new Fuse(this.items, {
      keys: ['name', 'description'],
      threshold: 0.3
    })
  },
  search() {
    this.filteredItems = this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items
  }
}

实时搜索优化

对于大型数据集，考虑添加防抖功能：

import { debounce } from 'lodash'

export default {
  methods: {
    search: debounce(function() {
      // 搜索逻辑
    }, 300)
  }
}

这些方法可以根据具体需求进行调整和组合，实现不同复杂度的搜索替换功能。