60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const model = defineModel<string>()
|
|
const props = defineProps<{
|
|
class: string
|
|
defaultClass?: string
|
|
disabled?: boolean
|
|
width?: number
|
|
widthUnit?: string
|
|
}>()
|
|
|
|
const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
|
|
const activeState = ref(false)
|
|
|
|
let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
|
|
let widthStyle = '';
|
|
if(props.width) {
|
|
widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
|
|
} else {
|
|
widthStyle = `width: 100%;`
|
|
}
|
|
|
|
const recId = inject<Ref<number>>('rec_id')!
|
|
const recAction = inject<Ref<string>>('rec_action')!
|
|
const recItem = inject<Ref<any>>('rec_item')!
|
|
|
|
watch(activeState, () => {
|
|
nextTick(() => {
|
|
if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
|
|
asyncInputRef.value.focus()
|
|
}
|
|
})
|
|
|
|
// document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
|
|
InputComp.value.focus()
|
|
// console.log(inputComp.__defaults)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="!activeState || disabled" @click="() => activeState = true"
|
|
:class="`${defaultClass}`"
|
|
:style="widthStyle">
|
|
{{ model }}
|
|
</div>
|
|
<InputComp v-else
|
|
v-model="model"
|
|
:class="`${defaultClass}`"
|
|
:style="widthStyle"
|
|
@blur="() => activeState = false"
|
|
/>
|
|
<!-- {{ inputComp.value }} -->
|
|
<!-- <Input
|
|
v-else v-model="model" @blur="() => activeState = false"
|
|
:class="`${defaultClass}`"
|
|
:style="widthStyle"
|
|
autofocus
|
|
/> -->
|
|
</template>
|