diff --git a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx index 560fe7dd..0cba4d9a 100644 --- a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx +++ b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx @@ -38,6 +38,7 @@ export default defineComponent({ }, setup(props, { slots }) { const status = ref('') + const moduleTitleRef = ref() watch( () => props.isSelected, () => { @@ -45,11 +46,13 @@ export default defineComponent({ } ) - const handleClick = () => { - if (props.isSelected) { - status.value = 'edit' + watch(status, (v) => { + if (v === 'edit') { + document.addEventListener('click', handleDocumentClick) + } else { + document.removeEventListener('click', handleDocumentClick) } - } + }) const typeName = computed(() => { if (!props.showType) return '' @@ -84,13 +87,34 @@ export default defineComponent({ return htmlText }) - return { slots, handleClick, status, tagTitle } + function handleClick(e) { + if (props.isSelected && status.value === 'preview') { + e.stopPropagation() + status.value = 'edit' + } + } + + function handleDocumentClick(e) { + const richEditorDOM = moduleTitleRef.value.querySelector('.rich-editor') + const isClickRichEditor = richEditorDOM?.contains(e.target) + + if (status.value === 'edit' && richEditorDOM && !isClickRichEditor) { + // 监听编辑状态时点击非编辑区域 + status.value = 'preview' + } + } + + return { slots, handleClick, status, tagTitle, moduleTitleRef } }, render() { const { isRequired, indexNumber, slots, status, tagTitle } = this return ( -