vkbeautify美化xml vue3 + ts

你可以使用 vkbeautify 库来美化 XML 。首先，你需要在你的项目中安装 vkbeautify 库。可以通过 npm 安装：

npm install vkbeautify --save

然后你可以在你的 TypeScript 代码中引入它：

import vkbeautify from 'vkbeautify';

接下来，你可以使用 `vkbeautify.xml` 方法来美化 XML。例如，在 Vue 3 中，你可以在组件的 `template` 中使用它：

<template>
  <div>
    <pre>{{ formattedXML }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import vkbeautify from 'vkbeautify';

export default defineComponent({
  data() {
    return {
      xml: '<root><child><subchild>text</subchild></child></root>',
    };
  },
  computed: {
    formattedXML() {
      return vkbeautify.xml(this.xml);
    },
  },
});
</script>

这里，我们将 `xml` 字符串传递给 `vkbeautify.xml` 方法，并将返回的美化后的字符串绑定到模板中的 `formattedXML` 属性上。最后，我们使用 `<pre>` 标签来显示美化后的 XML 字符串，以保留格式。