1.npm 安装vkbeautify、highlight.js npm install vkbeautify
npm install highlight.js //不成功时需要执行npm install --save vue-highlightjs
2.main.js里,引入
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
3.在组件中引入vkbeautify
<template>
<div class="" v-if="data">
<el-row :gutter="10" v-if="type == 'xml'">
<el-col :span="23">
<pre v-highlightjs="showXml(xml || '')">
<code class="highlight_s"> </code></pre>
</el-col>
<el-col :span="1">
<el-button size="mini" type="text"
@click="() => { this.xml = this.xml == this.data ? decodeURIComponent(this.data) : this.data }">{{
this.xml
== this.data ? '解码' : '编码' }}
</el-button>
</el-col>
</el-row>
<pre v-else v-highlightjs="data"><code class="highlight_s"> </code></pre>
</div>
<div v-else></div>
</template>
<script>
import vkbeautify from 'vkbeautify'
import 'highlight.js/styles/atom-one-dark.css'
export default {
name: '',
props: {
data: {
default: ''
},
type: {
default: 'xml'
}
//type可选json
},
components: {},
data() {
return {
xml: ''
}
},
computed: {},
watch: {},
methods: {
showXml(val) {
return vkbeautify.xml(val || '')
}
},
created() {
this.xml = this.data
},
mounted() {
},
}
</script>
<style scoped lang="scss">
pre {
max-height: 300px;
overflow: auto;
margin: 0
}
</style>
4.使用
<xml-data :data="formData.xmlData"></xml-data>