You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.0 KiB
91 lines
2.0 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-07-19 08:39:34
|
|
@ 备注: 抽屉
|
|
-->
|
|
<script lang="ts" setup>
|
|
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
|
|
import { aceEdit } from "@/api/DesignForm/utils";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
data?: object;
|
|
modelValue: boolean;
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
title?: string;
|
|
direction?: "rtl" | "ltr";
|
|
content: string;
|
|
id?: string;
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
codeType?: string;
|
|
}>(),
|
|
{
|
|
id: "editJson",
|
|
content: "",
|
|
direction: "ltr",
|
|
}
|
|
);
|
|
const emits = defineEmits<{
|
|
(e: "beforeClose"): void;
|
|
(e: "confirm", content: string): void;
|
|
(e: "update:modelValue", val: boolean): void;
|
|
}>();
|
|
const editor = ref<any>({});
|
|
const visible = ref(false);
|
|
watch(
|
|
() => props.modelValue,
|
|
(val: boolean) => {
|
|
visible.value = val;
|
|
if (val) {
|
|
initEditor();
|
|
}
|
|
}
|
|
);
|
|
const initEditor = () => {
|
|
nextTick(() => {
|
|
editor.value = aceEdit(props.content, props.id, props.codeType);
|
|
});
|
|
};
|
|
const dialogConfirm = () => {
|
|
const editVal = editor.value.getValue();
|
|
emits("confirm", editVal);
|
|
};
|
|
const drawerBeforeClose = () => {
|
|
emits("update:modelValue", false);
|
|
emits("beforeClose");
|
|
};
|
|
onMounted(() => {});
|
|
onUnmounted(() => {
|
|
if (Object.keys(editor.value).length !== 0) {
|
|
editor.value.destroy();
|
|
editor.value.container.remove();
|
|
}
|
|
});
|
|
</script>
|
|
<template>
|
|
<el-drawer
|
|
v-model="visible"
|
|
size="60%"
|
|
:title="title"
|
|
:direction="direction as any"
|
|
class="ace-dialog"
|
|
:append-to-body="true"
|
|
:before-close="drawerBeforeClose"
|
|
>
|
|
<template #header>
|
|
<div v-html="title"></div>
|
|
</template>
|
|
<div>{{ props.data }}</div>
|
|
<div v-if="visible" :id="id"></div>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" size="small" @click="dialogConfirm"> 确定 </el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
#editJson,
|
|
#editJsonCopy {
|
|
width: 100%;
|
|
height: calc(100vh - 90px);
|
|
}
|
|
</style>
|
|
|