带格式显示xml/json字符串

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>