export default {
// 只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
bind(el, binding, vnode) {
// const searchText = binding.value;
// const regex = new RegExp(searchText, 'gi');
//
// // 将需要高亮的文本用span包裹起来,并添加样式
// const highlightedText = el.innerHTML.replace(regex, (match) => `<span class="highlight">${match}</span>`);
//
// el.innerHTML = highlightedText;
const word = el.innerText;
const light = `<span style ="color: #3570FF; background: #FFEFA2;">${binding.value}</span>`;
const reg = new RegExp(binding.value, 'g');
el.innerHTML = word.replace(reg, light);
// 需要一个唯一值以免更新时候不生效
vnode.key = new Date().getTime();
},
update(el, binding) {
// update 组件
const word = el.innerText;
const light = `<span style ="color: #3570FF; background: #FFEFA2;">${binding.value}</span>`;
const reg = new RegExp(binding.value, 'g');
el.innerHTML = word.replace(reg, light);
},
// 只调用一次,指令与元素解绑时调用。
unbind(el) {
// 接触事件绑定
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
};
文本高亮指令
最新推荐文章于 2024-05-21 23:21:19 发布