diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts index 54a212ed..e70b8a18 100644 --- a/src/utils/emitter.ts +++ b/src/utils/emitter.ts @@ -3,7 +3,7 @@ import mitt, { Emitter } from 'mitt' export enum EmitterEvents { UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE', EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND', - UPDATE_TABLE_TEXT_STATE = 'UPDATE_TABLE_TEXT_STATE', + UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL', EXEC_TABLE_TEXT_COMMAND = 'EXEC_TABLE_TEXT_COMMAND', SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE', } diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index 4366ef23..99bcd457 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -108,6 +108,29 @@ +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ + +
启用主题表格:
@@ -202,7 +225,20 @@ export default defineComponent({ hasTheme.value = !!theme.value }, { deep: true, immediate: true }) - const updateTextAttrs = (style?: Partial) => { + const selectedCells = ref([]) + + const updateTextAttrs = () => { + if(!handleElement.value) return + + let rowIndex = 0 + let colIndex = 0 + if(selectedCells.value.length) { + const selectedCell = selectedCells.value[0] + rowIndex = +selectedCell.split('_')[0] + colIndex = +selectedCell.split('_')[1] + } + const style = handleElement.value.data[rowIndex][colIndex].style + if(!style) { textAttrs.value = { bold: false, @@ -231,9 +267,14 @@ export default defineComponent({ } } - emitter.on(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style)) + const updateSelectedCells = (cells: string[]) => { + selectedCells.value = cells + updateTextAttrs() + } + + emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells)) onUnmounted(() => { - emitter.off(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style)) + emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells)) }) const availableFonts = computed(() => store.state.availableFonts) @@ -245,6 +286,7 @@ export default defineComponent({ const emitUpdateTextAttrCommand = (textAttrProp: Partial) => { emitter.emit(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, textAttrProp) + updateTextAttrs() } const updateTheme = (themeProp: Partial) => { diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue index a1810452..3e789023 100644 --- a/src/views/components/element/TableElement/index.vue +++ b/src/views/components/element/TableElement/index.vue @@ -161,17 +161,6 @@ export default defineComponent({ const selectedCells = ref([]) - const emitUpdateTextAttrsState = () => { - let rowIndex = 0 - let colIndex = 0 - if(selectedCells.value.length) { - const selectedCell = selectedCells.value[0] - rowIndex = +selectedCell.split('_')[0] - colIndex = +selectedCell.split('_')[1] - } - emitter.emit(EmitterEvents.UPDATE_TABLE_TEXT_STATE, props.elementInfo.data[rowIndex][colIndex].style) - } - const updateTextAttrs = (textAttrProp: Partial) => { const data: TableCell[][] = JSON.parse(JSON.stringify(props.elementInfo.data)) @@ -190,12 +179,13 @@ export default defineComponent({ }) addHistorySnapshot() - nextTick(emitUpdateTextAttrsState) } const updateSelectedCells = (cells: string[]) => { selectedCells.value = cells - nextTick(emitUpdateTextAttrsState) + nextTick(() => { + emitter.emit(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, selectedCells.value) + }) } emitter.on(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, state => updateTextAttrs(state))