feat:json查看

src/components/PreviewJson/index.vue

@@ -0,0 +1,55 @@
+<template>
+	<div>
+		<el-button :style="jsonViewStyle" type="text" link @click="jsonViewVisible = true">
+			<div :style="jsonViewStyle" class="json-view">{{ jsonView }}</div>
+		</el-button>
+		<el-dialog append-to-body v-model="jsonViewVisible">
+			<vue-json-pretty :data="jsonData" showLength showLineNumber showIcon :collapsedOnClickBrackets="false" />
+			<template #footer>
+				<el-button @click="jsonViewVisible = false">关闭</el-button>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts" setup name="preview-json">
+import VueJsonPretty from "vue-json-pretty"
+import "vue-json-pretty/lib/styles.css"
+
+type Props = {
+	width?: number
+	json?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	width: 0,
+	json: "",
+})
+
+const jsonViewVisible = ref<boolean>(false)
+
+const jsonData = computed(() => {
+	if (!props.json) return ""
+	if (typeof props.json == "string") return JSON.parse(props.json)
+	return props.json
+})
+
+const jsonView = computed(() => {
+	if (!props.json) return ""
+	if (typeof props.json != "string") return JSON.stringify(props.json)
+	return props.json
+})
+
+const jsonViewStyle = computed(() => {
+	if (!props.width) return { width: "160px !important" }
+	return { width: `${props.width}px !important` }
+})
+</script>
+
+<style lang="scss" scoped>
+.json-view {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>

src/components/index.ts

@@ -12,6 +12,7 @@ import Tip from "/@/components/Tip/index.vue"
 import TagList from "/@/components/TagList/index.vue"
 import SvgIcon from "/@/components/SvgIcon/index.vue"
 import PreviewImage from "/@/components/PreviewImage/index.vue"
+import PreviewJson from "/@/components/PreviewJson/index.vue"
 import DraggableDepTree from "/@/components/DraggableDepTree/index.vue"
 
 // 业务组件
@@ -66,6 +67,7 @@ export default {
 		app.component("TagList", TagList)
 		app.component("SvgIcon", SvgIcon)
 		app.component("PreviewImage", PreviewImage)
+		app.component("PreviewJson", PreviewJson)
 		app.component("DraggableDepTree", DraggableDepTree)
 		app.component("TreeMultipleSelect", TreeMultipleSelect)
 		app.component("SelectHard", SelectHard)