vue 指定文字高亮的實現示例

更新時間：2023年12月05日 10:37:54 作者：廊坊吳彥祖

在做文字處理的項目時經常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實現示例,具有一定的參考價值,感興趣的可以了解一下

自定義指令

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令

鉤子函數

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
inserted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
unbind：只調用一次，指令與元素解綁時調用。

指令鉤子函數會被傳入以下參數：

el：指令所綁定的元素，可以用來直接操作 DOM。
binding：一個對象，包含以下 property：
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
- expression：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 “foo”。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

自定義指令：指定文字高亮

創(chuàng)建自定義指令

在項目 src 目錄下創(chuàng)建自定義指令目錄 directives ，并在目錄下創(chuàng)建 index.js 和 directives.js 文件

在這里插入圖片描述

index.js:

/*
 * @Description: 自定義指令
 */
import directives from './directives';

export default {
  	install(Vue) {
    	Object.keys(directives).forEach((key) => {
      		Vue.directive(key, directives[key]);
    	})
 	},
}

directives.js:

/**
 * @desc 指定文字高亮指令
 * @param hText 需要高亮的文字
 * @param text 全部文字
 * @param color 高亮文字的顏色
 */
const textLight = {
  	bind(el, binding, vnode) {
    	const { value } = binding;
    	if (value && typeof value === 'object') {
     	 	const { hText, text, color } = value;
    		el.innerHTML = text.replace(new RegExp(hText, 'ig'), (t) => {
      	  		return `<span style="color: ${color}">${t}</span>`;
	     	});
   		}
 	},
  	update(el, binding, vnode) {
	    const { value } = binding;
	    if (value && typeof value === 'object') {
	      	const { hText, text, color } = value;
	      	el.innerHTML = text.replace(new RegExp(hText, 'ig'), (t) => {
	        	return `<span style="color: ${color}">${t}</span>`;
	      	});
	    }
    },
};

export default {
  	textLight
};

main.js:

......

import Directives from './directives';
Vue.use(Directives);

使用自定義指令

<template>
  	<div class="demo">
   	 	<p v-textLight="{ hText: hText1, text: text, color: color }"></p>
    	<p v-textLight="{ hText: hText2, text: text, color: color }"></p>
  	</div>
</template>

<script>
export default {
  	data() {
    	return {
      		hText1: '自定義指令', // 一個高亮文字
      		hText2: '核心|自定義指令', // 多個高亮文字
      		text: '除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。',
      		color: '#c7254e'
    	}
  	}
}
</script>

效果

在這里插入圖片描述