PX4在使用外部定位下跳出position模式

以下代碼使用toolbar功能后，再點擊toolbar以外的區域時則跳出使用toolbar的狀態： <template> <div style="border: 1px solid #ccc" class="editor-container"> <div class="container"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" class="toolbar" /> <Editor style="height: 210px;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" class="editor" /> </div> </div> </template> <script> import '@wangeditor/editor/dist/css/style.css' import { onBeforeUnmount, onMounted, ref, watch } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 接收來自父組件的 v-model 值 export default { components: { Editor, Toolbar }, props: { modelValue: String }, emits: ['update:modelValue', 'response'], setup(props, { emit }) { const valueHtml = ref(props.modelValue || '<p>hello</p>') const editorRef = ref(null) onMounted(() => { setTimeout(() => { valueHtml.value = '' }, 1500) }) // 監聽 valueHtml 變化，同步給父組件 // 同時發送 response 事件 watch(valueHtml, (newVal) => { if (newVal !== props.modelValue) { emit('update:modelValue', newVal) emit('response', newVal) } }) // 同步父組件的 modelValue 到 valueHtml watch(() => props.modelValue, (newVal) => { if (newVal !== valueHtml.value) { valueHtml.value = newVal } }) onBeforeUnmount(() => { if (editorRef.value) editorRef.value.destroy() }) const handleCreated = (editor) => { editorRef.value = editor } return { valueHtml, editorRef, toolbarConfig: {}, editorConfig: { placeholder: '請輸入內容...' }, mode: 'default', handleCreated } } } </script> <style scoped> .editor-container { position: fixed; top: 56px; bottom: 45px; left: 0; width: 50%; height: 40%; z-index: 999; background-color: #b60000; overflow-y: auto; } .container { display: flex; flex-direction: column; width: 100%; /* 保持原宽度 */ border: 1px solid #ccc; /* 可选：保留容器边框 */ } .toolbar { } .editor { } </style>

vue3点击按钮跳出弹窗