vue利用指令使用highlight.js

最新推荐文章于 2024-12-15 23:59:16 发布

原创最新推荐文章于 2024-12-15 23:59:16 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #js #vue

vue小技巧专栏收录该内容

5 篇文章

订阅专栏

在项目中遇到使用Codemirror展示大量代码导致性能问题，改用highlight.js进行代码高亮，通过Vue指令实现预览效果。首先安装highlight.js，然后创建局部指令，遍历并应用高亮到每个代码块。此外，了解了Vue指令的生命周期钩子，如inserted、bind、update等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本身项目中使用的codemirror展示和编辑代码，但是遇到一个场景是一个页面展示十几二十个表格要展示，相当于使用多次，使用codemirror性能会很差，而且也是展示代码高亮，只预览不编辑，后面招待了highlight.js，直接使用不生效，后面采用的是指令的方式

1，安装highlight.js

cnpm i highlight.js -S

2,使用局部指令

// html
<pre v-highlight><code ref="codeSql" class="sql">{{sqlItem.content}}</code></pre>
// js
directives: {
    highlight: {
      function(el) {
        const blocks = el.querySelectorAll('pre code')
        blocks.forEach(block => {
          hljs.highlightBlock(block)
        })
      }
    }
  }

使用vue指令的时候自己总结了一下指令的一些属性

全局指令

Vue.directive('highlight', function(el) {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})

局部指令

directives: {
    highlight: {
      function(el) {
        let blocks = el.querySelectorAll('pre code')
        blocks.forEach(block => {
          hljs.highlightBlock(block)
        })
      }
    }
  },

局部指令

// 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
      inserted(el){
        el.focus()
        console.log( 'inserted' );
      },
      // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
      bind(){
        console.log( 'bind' );
      },
      // 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。
      // 指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
      update(){
        console.log( 'update' );
      },
      // 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
      componentUpdated(){
        console.log( 'componentUpdated' );
      },
      // 只调用一次，指令与元素解绑时调用。
      unbind(){
        console.log( 'unbind' );
      }