feat: 小功能建设(4) (#379)

This commit is contained in:
Jiangchunfu 2024-08-04 12:38:28 +08:00 committed by sudoooooo
parent 0745d90a5c
commit d9e9770eb8

View File

@ -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 (
<div class={['module-title', isRequired ? 'is-required' : '']} onClick={this.handleClick}>
<div
ref="moduleTitleRef"
class={['module-title', isRequired ? 'is-required' : '']}
onClick={this.handleClick}
>
{isRequired && <i class="module-title-required">*</i>}
<div class="module-content">
{this.showIndex && <span class="index"> {indexNumber}.</span>}