vue 搜索框像浏览器搜索一样 给字体标颜色然后点击下一个可以直接精准定位呀

可以通过在搜索框中输入关键字后，通过代码实现对关键字进行标记，然后在页面中实现快速定位功能。具体实现步骤如下：

1. 在搜索框中输入关键字后，获取搜索框中的值。

2. 使用正则表达式匹配页面中的所有匹配项，并将匹配项用 `<span>` 标签包裹起来，并添加样式。

3. 将匹配项的位置记录下来，并绑定到相应的元素上。

4. 实现快速定位功能，点击下一个时，根据记录的位置信息，跳转到下一个匹配项所在的位置。

以下是一个简单的实现示例：

<template>
  <div>
    <input type="text" v-model="searchText" @input="search" placeholder="请输入关键字">
    <div ref="content" :style="{height: contentHeight + 'px', overflow: 'auto'}">
      <div v-html="highlightedContent"></div>
    </div>
    <button @click="goToNextMatch">下一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段需要搜索的文本',
      searchText: '',
      matches: [],
      currentMatch: 0,
    }
  },
  computed: {
    highlightedContent() {
      let content = this.content
      this.matches.forEach(match => {
        content = content.replace(new RegExp(match, 'g'), `<span class="highlight">${match}</span>`)
      })
      return content
    },
    contentHeight() {
      return this.$refs.content ? this.$refs.content.offsetHeight : 0
    },
  },
  methods: {
    search() {
      const regex = new RegExp(this.searchText, 'gi')
      this.matches = []
      let match
      while (match = regex.exec(this.content)) {
        this.matches.push(match[0])
      }
      this.currentMatch = 0
    },
    goToNextMatch() {
      if (this.matches.length === 0) {
        return
      }
      this.currentMatch = (this.currentMatch + 1) % this.matches.length
      const match = this.matches[this.currentMatch]
      const element = document.querySelector(`.highlight:nth-child(${this.currentMatch + 1})`)
      if (element) {
        element.scrollIntoView({behavior: 'smooth', block: 'center'})
      }
    },
  },
}
</script>

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

在上面的示例中，通过使用正则表达式匹配关键字，并将匹配项用 `<span>` 标签包裹起来，实现了对关键字的标记。然后在实现快速定位功能时，通过记录匹配项的位置信息，并使用 `scrollIntoView()` 方法实现了快速定位的功能。