<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { MonacoEditor } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
const emit = defineEmits(['register', 'confirm']);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const editorRef = ref(null);
|
const text = ref('');
|
|
function init(data) {
|
text.value = data.text;
|
}
|
function handleSubmit() {
|
emit('confirm', text.value);
|
closeModal();
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="表单样式" :width="1000" @ok="handleSubmit" destroy-on-close class="form-script-modal">
|
<div class="form-script-modal-body">
|
<div class="main-board">
|
<div class="main-board-editor">
|
<MonacoEditor ref="editorRef" v-model="text" language="css" />
|
</div>
|
<div class="main-board-tips">
|
<p>示例：</p>
|
<p>.text {</p>
|
<p style="text-indent: 2em">background-color: #fff;</p>
|
<p style="text-indent: 2em">font-size: 18px;</p>
|
<p>}</p>
|
</div>
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
