<template>
<div @dblclick="rename(true, $event)" @click="dbDiff" :class="isEdit ? 'is-sedit': ''" ref="reDom">
<el-input @blur="rename(false, $event)" maxlength="40" @keyup.enter="rename(false, $event)" v-model="label" v-if="isEdit && !props.disabled" ref="inpRef" />
<popover :list="modelValue" v-else></popover>
</div>
</template>
<script setup>
import { ref, defineProps, nextTick, defineEmits } from 'vue'
// import $ from 'jquery'
const props = defineProps({
modelValue: String,
successRename: Function,
disabled: Boolean
})
const emits = defineEmits(['update:modelValue', 'edit', 'singleClick'])
const isEdit = ref(false)
const label = ref(props.modelValue)
const inpRef = ref(null)
const reDom = ref()
let timeout = null
const rename = (edit, e) => {
e.stopPropagation()
e.preventDefault()
clearTimeout(timeout)
// 避免重复触发
if (isEdit.value === edit) return
isEdit.value = edit
emits('edit', edit)
nextTick(() => {
if (isEdit.value) {
inpRef.value.focus()
label.value = props.modelValue
} else {
if (label.value && label.value !== props.modelValue) {
emits('update:modelValue', label.value)
props.successRename && props.successRename(label.value)
}
}
})
}
// 为了确保双击不会触发单击的事件
const dbDiff = (e) => {
e.stopPropagation()
clearTimeout(timeout)
if (isEdit.value) return
timeout = setTimeout(function() {
emits('singleClick', e)
reDom.value.parentNode.click()
}, 300)
}
</script>
<style lang="scss" scoped>
.is-edit {
}
</style>
实用组件:双击重命名
最新推荐文章于 2024-08-02 12:03:55 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)