44 lines
1011 B
Vue
44 lines
1011 B
Vue
<template>
|
|
<div class="es-input flex items-center w-full">
|
|
<label v-if="label">{{ label }}</label>
|
|
<div v-if="defaultNoBorder && noFocus" @click="handleClickText" class="w-full">{{value}}</div>
|
|
<n-input v-else ref="inRef" :value="value" @input="handleInput" @change="handleChange" @blur="noFocus = true" type="text" v-bind="attrs" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useAttrs,ref,nextTick} from "vue";
|
|
|
|
withDefaults(defineProps<{
|
|
value: string,
|
|
label: string,
|
|
defaultNoBorder: boolean,
|
|
}>(), {
|
|
value: '',
|
|
label: '',
|
|
defaultNoBorder: false
|
|
})
|
|
const emits = defineEmits(["update:value","change"])
|
|
|
|
const attrs = useAttrs();
|
|
const inRef = ref();
|
|
const noFocus = ref(true);
|
|
|
|
async function handleClickText(){
|
|
noFocus.value = false;
|
|
await nextTick();
|
|
inRef.value.focus();
|
|
}
|
|
|
|
function handleInput(value: string) {
|
|
emits("update:value", value);
|
|
}
|
|
|
|
function handleChange(value: string) {
|
|
emits("change", value);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
</style> |