vue 全局注册自定义指令 自动化引入 vue.directive 格式化文本

目录结构

vue 全局注册自定义指令 自动化引入

//注册文件directive/index.js
import Vue from 'vue'//引入vue
const directives = require.context('../directive', true, /(?<!index)\.js$/); //实现自动化导入 文件路径，是否遍历子目录，正则匹配 (?<!index)//排除.js前跟着index的文件
directives.keys().map(item => {//在关键字中遍历
  const componentConfig = directives(item)//拿取文件内容
  const name = item.replace('./', '').replace(".js", '')//文件名字替换掉./和后缀.js
  Vue.directive(name,componentConfig)//vue中注册自定义指令
})

htmlPlus中内容

// 当被绑定的元素插入到 DOM 中时……
export const inserted=function(el, content){//生命周期 绑定
  let data = content.value//拿默认内容
  // 聚焦元素
  let text = data.replace(/\n/g, "</br>")//格式化换行
  let blue = /(?<=@).+?(?=@)/ //定义正则
  let yellow = /(?<=#).+?(?=#)/
  let red = /(?<=&).+?(?=&)/
  let green = /(?<=\$).+?(?=\$)/
  let x = true//判断是否没有更多
  while (text) {//循环避免处理不完所以不加限制条件
    x = true//进入将状态改为更多
    if (blue.test(text)) {
      x = false//查找到内容将状态更改
      text = text.replace(
        /@.+?@/m,
        `<span style='color:rgb(19,110,194)'>${text.match(blue)[0]}</span>`)
        //正则格式化替换内容
    }
    if (red.test(text)) {
      x = false
      text = text.replace(
        /&.+?&/m,
        `<span style='color:rgb(194,105,105)'>${text.match(red)[0]}</span>`)
    }
    if (green.test(text)) {
      x = false
      text = text.replace(
        /\$.+?\$/m,
        `<span style='color:rgb(113,162,127)'>${text.match(green)[0]}</span>`)
    }
    if (yellow.test(text)) {
      x = false
      text = text.replace(
        /#.+?#/m,
        `<span style='color:rgb(193,168,114)'>${text.match(yellow)[0]}</span>`)
    }
    if (x) {//如果没有出现状态更改证明没有任何处理 则推出循环
      break
    }
  }
  el.innerHTML = text//将数据返回
}
export const update=function (el, content){//生命周期更新
  let data = content.value
  let text = data.replace(/\n/g, "</br>")
  let blue = /(?<=@).+?(?=@)/
  let yellow = /(?<=#).+?(?=#)/
  let red = /(?<=&).+?(?=&)/
  let green = /(?<=\$).+?(?=\$)/
  let x = true
  while (text) {
    x = true
    if (blue.test(text)) {
      x = false
      text = text.replace(
        /@.+?@/m,
        `<span style='color:rgb(88,110,132)'>${text.match(blue)[0]}</span>`)
    }
    if (red.test(text)) {
      x = false
      text = text.replace(
        /&.+?&/m,
        `<span style='color:rgb(194,105,105)'>${text.match(red)[0]}</span>`)
    }
    if (green.test(text)) {
      x = false
      text = text.replace(
        /\$.+?\$/m,
        `<span style='color:rgb(113,162,127)'>${text.match(green)[0]}</span>`)
    }
    if (yellow.test(text)) {
      x = false
      text = text.replace(
        /#.+?#/m,
        `<span style='color:rgb(193,168,114)'>${text.match(yellow)[0]}</span>`)
    }
    if (x) {
      break
    }
  }
  el.innerHTML = text
}

还要再main.js中引入文件 引入这个注册的文件

//main文件
import './directive/index'

指令的使用