157 lines
3.8 KiB
Vue
157 lines
3.8 KiB
Vue
<template>
|
||
<div>
|
||
<el-drawer v-bind="$attrs" @opened="onOpen" @close="onClose">
|
||
<div class="action-bar" :style="{ 'text-align': 'left' }">
|
||
<span class="bar-btn" @click="refresh">
|
||
<i class="el-icon-refresh" />
|
||
刷新
|
||
</span>
|
||
<span ref="copyBtn" class="bar-btn copy-json-btn">
|
||
<i class="el-icon-document-copy" />
|
||
复制JSON
|
||
</span>
|
||
<span class="bar-btn" @click="exportJsonFile">
|
||
<i class="el-icon-download" />
|
||
导出JSON文件
|
||
</span>
|
||
<span
|
||
class="bar-btn delete-btn"
|
||
@click="$emit('update:visible', false)"
|
||
>
|
||
<i class="el-icon-circle-close" />
|
||
关闭
|
||
</span>
|
||
</div>
|
||
<div id="editorJson" class="json-editor" />
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="JsonDrawer">
|
||
import { beautifierConf } from "@/utils/index";
|
||
import ClipboardJS from "clipboard";
|
||
import { saveAs } from "file-saver";
|
||
import loadMonaco from "@/utils/loadMonaco";
|
||
import loadBeautifier from "@/utils/loadBeautifier";
|
||
import { defineComponent, onBeforeUnmount, onMounted, toRefs } from "vue";
|
||
|
||
let beautifier;
|
||
let monaco;
|
||
|
||
const props = defineComponent({
|
||
jsonStr: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
});
|
||
const { jsonStr } = toRefs(props);
|
||
const beautifierJson = ref("");
|
||
const preventDefaultSave = (e) => {
|
||
if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
|
||
e.preventDefault();
|
||
}
|
||
};
|
||
const onOpen = () => {
|
||
loadBeautifier((btf) => {
|
||
beautifier = btf;
|
||
beautifierJson.value = beautifier.js(jsonStr.value, beautifierConf.js);
|
||
|
||
loadMonaco((val) => {
|
||
monaco = val;
|
||
setEditorValue("editorJson", this.beautifierJson);
|
||
});
|
||
});
|
||
};
|
||
const onClose = () => {};
|
||
const setEditorValue = (id, codeStr) => {
|
||
if (jsonEditor.value) {
|
||
jsonEditor.value.setValue(codeStr);
|
||
} else {
|
||
jsonEditor.value = monaco.editor.create(document.getElementById(id), {
|
||
value: codeStr,
|
||
theme: "vs-dark",
|
||
language: "json",
|
||
automaticLayout: true,
|
||
});
|
||
// ctrl + s 刷新
|
||
jsonEditor.value.onKeyDown((e) => {
|
||
if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
|
||
this.refresh();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
const exportJsonFile = () => {
|
||
this.$prompt("文件名:", "导出文件", {
|
||
inputValue: `${+new Date()}.json`,
|
||
closeOnClickModal: false,
|
||
inputPlaceholder: "请输入文件名",
|
||
}).then(({ value }) => {
|
||
if (!value) value = `${+new Date()}.json`;
|
||
const codeStr = this.jsonEditor.getValue();
|
||
const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
|
||
saveAs(blob, value);
|
||
});
|
||
};
|
||
const refresh = () => {
|
||
try {
|
||
this.$emit("refresh", JSON.parse(this.jsonEditor.getValue()));
|
||
} catch (error) {
|
||
this.$notify({
|
||
title: "错误",
|
||
message: "JSON格式错误，请检查",
|
||
type: "error",
|
||
});
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
window.addEventListener("keydown", preventDefaultSave);
|
||
const clipboard = new ClipboardJS(".copy-json-btn", {
|
||
text: (trigger) => {
|
||
this.$notify({
|
||
title: "成功",
|
||
message: "代码已复制到剪切板，可粘贴。",
|
||
type: "success",
|
||
});
|
||
return this.beautifierJson;
|
||
},
|
||
});
|
||
clipboard.on("error", (e) => {
|
||
this.$message.error("代码复制失败");
|
||
});
|
||
});
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("keydown", preventDefaultSave);
|
||
});
|
||
</script>
|
||
|
||
<!-- <script>
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {},
|
||
mounted() {},
|
||
beforeDestroy() {},
|
||
methods: {},
|
||
};
|
||
</script> -->
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/styles/mixin.scss";
|
||
|
||
::v-deep .el-drawer__header {
|
||
display: none;
|
||
}
|
||
// @include action-bar;
|
||
|
||
.json-editor {
|
||
height: calc(100vh - 33px);
|
||
}
|
||
</style>
|