预览 json, xml
This commit is contained in:
@ -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",
|
||||||
|
115
src/main.js
115
src/main.js
@ -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");
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Reference in New Issue
Block a user