127 lines
2.7 KiB
Vue
127 lines
2.7 KiB
Vue
<template>
|
|
<div class="cursor w-full">
|
|
<slot name="read">
|
|
<div class="flex align-center" v-if="!isEdit" @dblclick="dblclick">
|
|
<auto-tooltip :content="data">
|
|
{{ data }}
|
|
</auto-tooltip>
|
|
|
|
<el-button
|
|
v-if="trigger === 'default' && showEditIcon"
|
|
class="ml-4"
|
|
@click.stop="editNameHandle"
|
|
text
|
|
>
|
|
<el-icon><EditPen /></el-icon>
|
|
</el-button>
|
|
</div>
|
|
</slot>
|
|
<slot>
|
|
<div class="flex align-center" @click.stop v-if="isEdit">
|
|
<div class="w-full">
|
|
<el-input
|
|
ref="inputRef"
|
|
v-model="writeValue"
|
|
:placeholder="$t('common.inputPlaceholder')"
|
|
autofocus
|
|
:maxlength="maxlength || '-'"
|
|
:show-word-limit="maxlength ? true : false"
|
|
@blur="isEdit = false"
|
|
@keyup.enter="submit"
|
|
clearable
|
|
></el-input>
|
|
</div>
|
|
|
|
<span class="ml-4">
|
|
<el-button type="primary" text @mousedown="submit" :disabled="loading">
|
|
<el-icon><Select /></el-icon>
|
|
</el-button>
|
|
</span>
|
|
<span>
|
|
<el-button text @click.stop="isEdit = false" :disabled="loading">
|
|
<el-icon><CloseBold /></el-icon>
|
|
</el-button>
|
|
</span>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, watch, onMounted, nextTick } from 'vue'
|
|
defineOptions({ name: 'ReadWrite' })
|
|
const props = defineProps({
|
|
data: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showEditIcon: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxlength: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
trigger: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value: string) => ['default', 'dblclick', 'manual'].includes(value)
|
|
},
|
|
write: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
const emit = defineEmits(['change', 'close'])
|
|
const inputRef = ref()
|
|
const isEdit = ref(false)
|
|
const writeValue = ref('')
|
|
const loading = ref(false)
|
|
|
|
watch(isEdit, (bool) => {
|
|
if (!bool) {
|
|
writeValue.value = ''
|
|
emit('close')
|
|
} else {
|
|
setTimeout(() => {
|
|
nextTick(() => {
|
|
inputRef.value?.focus()
|
|
})
|
|
}, 200)
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => props.write,
|
|
(bool) => {
|
|
if (bool && props.trigger === 'manual') {
|
|
editNameHandle()
|
|
} else {
|
|
isEdit.value = false
|
|
}
|
|
}
|
|
)
|
|
|
|
function dblclick() {
|
|
if (props.trigger === 'dblclick') {
|
|
editNameHandle()
|
|
}
|
|
}
|
|
|
|
function submit() {
|
|
loading.value = true
|
|
emit('change', writeValue.value)
|
|
setTimeout(() => {
|
|
isEdit.value = false
|
|
loading.value = false
|
|
}, 200)
|
|
}
|
|
function editNameHandle() {
|
|
writeValue.value = props.data
|
|
isEdit.value = true
|
|
}
|
|
|
|
onMounted(() => {})
|
|
</script>
|
|
<style lang="scss" scoped></style>
|