预览 json, xml

This commit is contained in:
cxc
2022-12-23 12:52:36 +08:00
parent 955f86201f
commit 8c05f41bc9
4 changed files with 82 additions and 60 deletions

View File

@ -16,6 +16,7 @@
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "2.0.10", "@element-plus/icons-vue": "2.0.10",
"@highlightjs/vue-plugin": "^2.1.0",
"@vueuse/core": "9.5.0", "@vueuse/core": "9.5.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "^5.1.12",
@ -26,7 +27,7 @@
"element-plus": "2.2.21", "element-plus": "2.2.21",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"highlight.js": "10.5.0", "highlight.js": "^11.7.0",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",

View File

@ -1,81 +1,96 @@
import { createApp } from 'vue' import { createApp } from "vue";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import ElementPlus from 'element-plus' import ElementPlus from "element-plus";
import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言 import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言
import '@/assets/styles/index.scss' // global css import "@/assets/styles/index.scss"; // global css
import App from './App' import App from "./App";
import store from './store' import store from "./store";
import router from './router' import router from "./router";
import directive from './directive' // directive import directive from "./directive"; // directive
// 高亮
import "highlight.js/styles/atom-one-dark.css";
import hljs from "highlight.js/lib/core";
import json from "highlight.js/lib/languages/json";
import xml from "highlight.js/lib/languages/xml";
import hljsVuePlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage("json", json);
hljs.registerLanguage("xml", xml);
// 注册指令 // 注册指令
import plugins from './plugins' // plugins import plugins from "./plugins"; // plugins
import { download } from '@/utils/request' import { download } from "@/utils/request";
// svg图标 // svg图标
import 'virtual:svg-icons-register' import "virtual:svg-icons-register";
import SvgIcon from '@/components/SvgIcon' import SvgIcon from "@/components/SvgIcon";
import elementIcons from '@/components/SvgIcon/svgicon' import elementIcons from "@/components/SvgIcon/svgicon";
import './permission' // permission control import "./permission"; // permission control
import { useDict } from '@/utils/dict' import { useDict } from "@/utils/dict";
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi' import {
parseTime,
resetForm,
addDateRange,
handleTree,
selectDictLabel,
selectDictLabels,
} from "@/utils/ruoyi";
// 分页组件 // 分页组件
import Pagination from '@/components/Pagination' import Pagination from "@/components/Pagination";
// 自定义表格工具组件 // 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar' import RightToolbar from "@/components/RightToolbar";
// 文件上传组件 // 文件上传组件
import FileUpload from "@/components/FileUpload" import FileUpload from "@/components/FileUpload";
// 图片上传组件 // 图片上传组件
import ImageUpload from "@/components/ImageUpload" import ImageUpload from "@/components/ImageUpload";
// 图片预览组件 // 图片预览组件
import ImagePreview from "@/components/ImagePreview" import ImagePreview from "@/components/ImagePreview";
// 自定义树选择组件 // 自定义树选择组件
import TreeSelect from '@/components/TreeSelect' import TreeSelect from "@/components/TreeSelect";
// 字典标签组件 // 字典标签组件
import DictTag from '@/components/DictTag' import DictTag from "@/components/DictTag";
const app = createApp(App) const app = createApp(App);
// 全局方法挂载 // 全局方法挂载
app.config.globalProperties.useDict = useDict app.config.globalProperties.useDict = useDict;
app.config.globalProperties.download = download app.config.globalProperties.download = download;
app.config.globalProperties.parseTime = parseTime app.config.globalProperties.parseTime = parseTime;
app.config.globalProperties.resetForm = resetForm app.config.globalProperties.resetForm = resetForm;
app.config.globalProperties.handleTree = handleTree app.config.globalProperties.handleTree = handleTree;
app.config.globalProperties.addDateRange = addDateRange app.config.globalProperties.addDateRange = addDateRange;
app.config.globalProperties.selectDictLabel = selectDictLabel app.config.globalProperties.selectDictLabel = selectDictLabel;
app.config.globalProperties.selectDictLabels = selectDictLabels app.config.globalProperties.selectDictLabels = selectDictLabels;
// 全局组件挂载 // 全局组件挂载
app.component('DictTag', DictTag) app.component("DictTag", DictTag);
app.component('Pagination', Pagination) app.component("Pagination", Pagination);
app.component('TreeSelect', TreeSelect) app.component("TreeSelect", TreeSelect);
app.component('FileUpload', FileUpload) app.component("FileUpload", FileUpload);
app.component('ImageUpload', ImageUpload) app.component("ImageUpload", ImageUpload);
app.component('ImagePreview', ImagePreview) app.component("ImagePreview", ImagePreview);
app.component('RightToolbar', RightToolbar) app.component("RightToolbar", RightToolbar);
app.use(router) app.use(router);
app.use(store) app.use(store);
app.use(plugins) app.use(plugins);
app.use(elementIcons) app.use(elementIcons);
app.component('svg-icon', SvgIcon) app.use(hljsVuePlugin);
app.component("svg-icon", SvgIcon);
directive(app) directive(app);
// 使用element-plus 并且设置全局的大小 // 使用element-plus 并且设置全局的大小
app.use(ElementPlus, { app.use(ElementPlus, {
locale: locale, locale: locale,
// 支持 large、default、small // 支持 large、default、small
size: Cookies.get('size') || 'default' size: Cookies.get("size") || "default",
}) });
app.mount('#app') app.mount("#app");

View File

@ -216,15 +216,18 @@
append-to-body append-to-body
destroy-on-close destroy-on-close
> >
<!-- <highlightjs <highlightjs
:language="previewType" :language="previewType"
:code="previewResult" :code="previewResult"
style="height: 60vh" style="height: 60vh"
/> --> />
<!-- <pre>
<code>
{{ previewResult }}
</code>
</pre> -->
<!-- <div <!-- <div
v-html=" v-html="highlightjs.highlight('xml', { code: previewResult }).value"
highlightjs.highlight(previewResult, { language: previewType }).value
"
></div> --> ></div> -->
</el-dialog> </el-dialog>
</div> </div>
@ -251,7 +254,6 @@ import activitiModdleExtension from "./plugins/extension-moddle/activiti";
import flowableModdleExtension from "./plugins/extension-moddle/flowable"; import flowableModdleExtension from "./plugins/extension-moddle/flowable";
// 引入json转换与高亮 // 引入json转换与高亮
import convert from "xml-js"; import convert from "xml-js";
// import highlightjs from "@/plugins/package/highlight";
import { computed, onMounted, ref } from "vue"; import { computed, onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
@ -652,5 +654,5 @@ function previewProcessJson() {
} }
</script> </script>
<style> <style>
@import "highlight.js/styles/atom-one-dark-reasonable.css"; /* @import "highlight.js/styles/atom-one-dark-reasonable.css"; */
</style> </style>

View File

@ -1,5 +1,9 @@
import hljs from "highlight.js/lib/core"; import hljs from "highlight.js/lib/core";
hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml")); import json from "highlight.js/lib/languages/json";
hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json")); import xml from "highlight.js/lib/languages/xml";
// import hljsVuePlugin from "@highlightjs/vue-plugin";
hljs.registerLanguage("json", json);
hljs.registerLanguage("xml", xml);
export default hljs; export default hljs;