多维表格

56 lines
1.2 KiB

<script setup lang="ts">
import { CellValueInj, inject } from '#imports'
const value = inject(CellValueInj)
const showEditWarning = ref(false)
const showClearWarning = ref(false)
const showEditWarningMessage = () => {
showEditWarning.value = true
setTimeout(() => {
showEditWarning.value = false
}, 3000)
}
const showClearWarningMessage = () => {
showClearWarning.value = true
setTimeout(() => {
showClearWarning.value = false
}, 3000)
}
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
showEditWarningMessage()
break
case 'Delete':
showClearWarningMessage()
break
}
})
</script>
<template>
<div>
<span class="text-center pl-3">
{{ value }}
</span>
<div>
<div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
<!-- TODO: i18n -->
Warning: Computed field - unable to edit content.
</div>
<div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
<!-- TODO: i18n -->
Warning: Computed field - unable to clear content.
</div>
</div>
</div>
</template>