fix: 表格单元格内无法输入空格和换行

This commit is contained in:
pipipi-pikachu 2021-06-06 11:16:40 +08:00
parent 85ce023845
commit 87c9a2996e
4 changed files with 24 additions and 15 deletions

View File

@ -16,7 +16,7 @@ import { defineComponent, onUnmounted, ref, watch } from 'vue'
export default defineComponent({
name: 'custom-textarea',
props: {
modelValue: {
value: {
type: String,
default: '',
},
@ -32,16 +32,16 @@ export default defineComponent({
// v-modal
//
watch(() => props.modelValue, () => {
watch(() => props.value, () => {
if (isFocus.value) return
text.value = props.modelValue
if (textareaRef.value) textareaRef.value.innerHTML = props.modelValue
text.value = props.value
if (textareaRef.value) textareaRef.value.innerHTML = props.value
}, { immediate: true })
const handleInput = () => {
if (!textareaRef.value) return
const text = textareaRef.value.innerHTML
emit('update:modelValue', text)
emit('updateValue', text)
}
//
@ -56,7 +56,7 @@ export default defineComponent({
const clipboardDataFirstItem = e.clipboardData.items[0]
if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
clipboardDataFirstItem.getAsString(text => emit('update:modelValue', text))
clipboardDataFirstItem.getAsString(text => emit('updateValue', text))
}
}
}

View File

@ -55,12 +55,14 @@
v-contextmenu="el => contextmenus(el)"
>
<CustomTextarea
v-if="activedCell === `${rowIndex}_${colIndex}`"
class="cell-text"
:class="{ 'active': activedCell === `${rowIndex}_${colIndex}` }"
:contenteditable="activedCell === `${rowIndex}_${colIndex}` ? 'plaintext-only' : false"
v-model="cell.text"
@update:modelValue="handleInput()"
contenteditable="plaintext-only"
:value="cell.text"
@updateValue="value => handleInput(value, rowIndex, colIndex)"
/>
<div v-else class="cell-text" v-html="formatText(cell.text)" />
</td>
</tr>
</tbody>
@ -76,7 +78,7 @@ import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
import { ContextmenuItem } from '@/components/Contextmenu/types'
import { KEYS } from '@/configs/hotkey'
import { createRandomCode } from '@/utils/common'
import { getTextStyle } from './utils'
import { getTextStyle, formatText } from './utils'
import useHideCells from './useHideCells'
import useSubThemeColor from './useSubThemeColor'
@ -428,8 +430,8 @@ export default defineComponent({
//
//
//
//
//
//
const tabActiveCell = () => {
const getNextCell = (i: number, j: number): [number, number] | null => {
if (!tableCells.value[i]) return null
@ -501,7 +503,8 @@ export default defineComponent({
})
//
const handleInput = debounce(function() {
const handleInput = debounce(function(value, rowIndex, colIndex) {
tableCells.value = tableCells.value[rowIndex][colIndex].text = value
emit('change', tableCells.value)
}, 300, { trailing: true })
@ -626,6 +629,7 @@ export default defineComponent({
contextmenus,
handleInput,
subThemeColor,
formatText,
}
},
})

View File

@ -35,7 +35,7 @@
:colspan="cell.colspan"
v-show="!hideCells.includes(`${rowIndex}_${colIndex}`)"
>
<div class="cell-text" v-html="cell.text" />
<div class="cell-text" v-html="formatText(cell.text)" />
</td>
</tr>
</tbody>
@ -46,7 +46,7 @@
<script lang="ts">
import { computed, defineComponent, PropType, ref, watch } from 'vue'
import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
import { getTextStyle } from './utils'
import { getTextStyle, formatText } from './utils'
import useHideCells from './useHideCells'
import useSubThemeColor from './useSubThemeColor'
@ -99,6 +99,7 @@ export default defineComponent({
totalWidth,
hideCells,
getTextStyle,
formatText,
subThemeColor,
}
},

View File

@ -31,4 +31,8 @@ export const getTextStyle = (style?: TableCellStyle) => {
fontFamily: fontname || '微软雅黑',
textAlign: align || 'left',
}
}
export const formatText = (text: string) => {
return text.replace(/\n/g, '</br>').replace(/ /g, '&nbsp;')
}