vue 实现XML的格式化和高亮显示

一 . xml格式化 用到了vkbeautify模块

  1. 首先先下载vkbeautify文件
 npm install vkbeautify
  1. 组件里,引入vkbeautify模块
 import vkbeautify from ‘vkbeautify’
  1. 格式化字符串方法
 vkbeautify.xml(‘xxxxxxxxx’)

二. xml在页面高亮显示 用到了 highlight.js

Vue自定义指令

  1. 首先先下载highlight.js文件
npm install highlight.js
  1. 在main.js中引入文件
//xml格式 页面代码高亮文件引入 
import hljs from 'highlight.js'
//样式文件,我选了a11y-light.css,可选择文件里其他高亮样式css
import 'highlight.js/styles/a11y-light.css'
  1. 在main.js中 自定义指令
Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})

注意:!!!此处有坑,官网关于动态页面、静态页面渲染,方法不同

此处的highlightBlock()方法用于动态渲染,从服务器端获取动态数据的页面渲染,测试时最好使用动态数据,不然会出现路由刷新/跳转后,高亮效果消失的情况。关于静态页面的渲染,官网有 initHighlighting()方法,主要是获取页面中的pre,code标签,按照特定的规则为其添加样式,只执行一次。

  1. 最后在组件中使用,要放在pre标签下的code标签里面
<div>    
 <pre v-highlight>
  <code >{{xmlString}}</code>
 </pre>
</div>

你可能感兴趣的:(vue插件汇总,vue.js,xml,javascript)