快捷導(dǎo)航

vue 指定文字高亮的實(shí)現(xiàn)示例

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

在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

自定義指令

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

鉤子函數(shù)

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

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

指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：

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

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

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

在項(xià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: '自定義指令', // 一個(gè)高亮文字
      		hText2: '核心|自定義指令', // 多個(gè)高亮文字
      		text: '除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令。',
      		color: '#c7254e'
    	}
  	}
}
</script>

效果

在這里插入圖片描述