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.
90 lines
1.9 KiB
90 lines
1.9 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<{
|
|
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 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>
|
|
|