vue3 自定义指令 关键字 标记 强调 标红

1、创建对应文件及其文件夹

2、创建 emphasize.ts 自定义指令文件

// 匹配常用字符集 列表
// 根据业务需求 配置字符集
const characterList: any = {"<": "<",">": ">","&": "&","¥": "¥",
};
// 处理函数
const nodeChild = (node: any, val: any) => {const children = Array.from(node.children);let nodeSplicing: any = "";//   判断是否为末级节点if (children.length !== 0) {// 子节点数据遍历children.forEach((item: any) => {// 递归 子节点nodeChild(item, val);// nodeSplicing 为当前节点的子级拼接后的字符串nodeSplicing = nodeSplicing + item.outerHTML;});// 进行数据替换 防止标签内部 有需要标记的重复数据 导致标红后 标签外露// innerHTML 返回标签开始和结束标签之间的HTMLnode.innerHTML = node.innerHTML.replaceAll(nodeSplicing, `*^(_)`).toString();node.innerHTML = node.innerHTML.replaceAll(val,`${val}`);node.innerHTML = node.innerHTML.replaceAll("*^(_)", nodeSplicing);} else {// 末级节点 不需要内部标签数据替换node.innerHTML = node.innerHTML.replaceAll(val,`${val}`);}
};
export default {mounted(el: any, binding?: any) {// 进行字符集匹配const value: string = binding.value;const valueArr: Array = value.split("");valueArr.forEach((item: string, index: number) => {valueArr[index] = characterList[item] || item;});// 进行数据匹配 如当前绑定节点 整体并无需要标记内容 不进行DOM 操作const idx: number = el.innerHTML.indexOf(valueArr.join(""));if (idx != -1) {nodeChild(el, valueArr.join(""));}},//   binding 数据改变 调用 初始不会调用//   不建议 因为原始DOM已经被标记//   可根据业务需要进行 原始数据传参 对原始数据进行操作 然后进行DOM替换即可//   beforeUpdate(el: any, binding?: any) {//     nodeChild(el, binding);//   },
};

3、 index.ts 引入

import emphasize from "./modules/emphasize";
// 统一入口
export default function directive(app: any) {app.directive("emphasize", emphasize);
}

 4、main.ts 中引入 指令入口文件

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import router from "./router";
import store from "./store";
// 引入指令入口文件
import directive from "@/directive/index";
// 挂载
directive(app);
app.use(store);
app.use(router);
app.mount("#app");

5、使用 

 6、效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！