1、创建指令文件
strHighLight.js
export default Vue => {
Vue.directive('strHighLight', {
bind (el, binding) {
const val = el.innerText
const color = 'color:var(--blue500);'
el.innerHTML = val.replace(new RegExp(binding.value, 'ig'), a => {
return `<span style=${color}>${a}</span>`
})
},
update (el, binding) {
const val = el.innerText
const color = 'color:var(--blue500);'
el.innerHTML = val.replace(new RegExp(binding.value, 'ig'), a => {
return `<span style=${color}>${a}</span>`
})
}
})
}
2、main.js引入并全局注册
import Vue from 'vue'
import strHighLight from '@/directives/strHighLight'
Vue.use(strHighLight)