初探Vue3关键字高亮：解锁更智能更酷炫的搜索体验

前端

2023-01-01 10:12:13

Vue3 中的高亮：让你的搜索结果一目了然

搜索框的福音

在互联网信息浩瀚的今天，搜索功能已然成为我们获取知识和资讯不可或缺的利器。为了让搜索结果更直观，提高用户体验，关键字高亮技术应运而生。它能使用户在浏览结果时一眼找到相关内容，省时又省心。

Vue3 高亮指令：轻而易举的高光时刻

Vue3 关键字高亮指令是 Vue.js 开发框架中一项贴心的功能，让开发者轻松实现文本中的关键词高亮显示。借助这项指令，你能动态修改文本内容，让关键词以醒目的颜色或样式脱颖而出。

使用指南：打造属于你的高光效果

准备就绪：导入指令

在你使用 Vue3 高亮指令之前，需要先在 Vue 组件中导入该指令：

import { Vue } from 'vue'
import HighlightDirective from './HighlightDirective.js'

Vue.directive('highlight', HighlightDirective)

自定义指令：高亮逻辑

接下来，你需要在 HighlightDirective.js 文件中定义自定义指令，它包含实现高亮功能的逻辑：

export default {
  mounted(el, binding) {
    const keyword = binding.value // 获取要高亮的关键词
    const text = el.textContent // 获取元素中的文本内容
    const highlightedText = text.replace(new RegExp(keyword, 'gi'), `<span style="color: red">${keyword}</span>`) // 替换关键词，并高亮显示
    el.innerHTML = highlightedText // 更新元素文本内容
  }
}

在 mounted 钩子函数中，我们将关键词、元素文本内容提取出来，通过正则表达式替换关键词，用 <span> 标签包裹并设置样式，最后将更新后的文本重新赋值给元素。

使用指令：点亮关键词

完成以上步骤，你就可以在 Vue 组件中使用 highlight 指令了：

<template>
  <div v-for="item in items" :key="item.id">
    <p>{{ item.name | highlight(keyword) }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const keyword = ref('') // 要高亮的关键词
    const items = ref([ // 要高亮的列表项
      { id: 1, name: 'Vue 3' },
      { id: 2, name: 'React' },
      { id: 3, name: 'Angular' }
    ])

    return {
      keyword,
      items
    }
  }
}
</script>