多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.4 KiB

<script setup lang="ts">
import { computed, inject, onMounted, ref } from '#imports'
interface Props {
modelValue: string
}
const { modelValue: value } = defineProps<Props>()
const emit = defineEmits(['update:modelValue'])
const editEnabled = inject<boolean>('editEnabled', false)
const root = ref<HTMLInputElement>()
const localState = computed({
get: () => value,
set: (val) => emit('update:modelValue', val),
})
onMounted(() => {
root.value?.focus()
})
/* export default {
name: 'TextAreaCell',
props: {
value: String,
},
computed: {
localState: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
},
},
parentListeners() {
const $listeners = {}
if (this.$listeners.blur) {
$listeners.blur = this.$listeners.blur
}
if (this.$listeners.focus) {
$listeners.focus = this.$listeners.focus
}
return $listeners
},
},
created() {
this.localState = this.value
},
mounted() {
this.$refs.textarea && this.$refs.textarea.focus()
},
} */
</script>
<template>
<textarea v-if="editEnabled" ref="root" v-model="localState" rows="4" @keydown.alt.enter.stop @keydown.shift.enter.stop />
<span v-else>{{ localState }}</span>
</template>
<style scoped>
input,
textarea {
width: 100%;
min-height: 60px;
height: 100%;
color: var(--v-textColor-base);
}
</style>