vue 实现双击编辑
vue 实现双击编辑
使用 v-on 监听双击事件
通过 v-on:dblclick 或 @dblclick 监听元素的双击事件，触发编辑状态。在模板中绑定双击事件，并在方法中切换编辑状态。
<template>
<div>
<span v-if="!isEditing" @dblclick="startEditing">{{ content }}</span>
<input
v-else
v-model="content"
@blur="stopEditing"
@keyup.enter="stopEditing"
ref="input"
/>
</div>
</template>切换编辑状态
在 Vue 组件的 data 中定义 isEditing 和 content 变量，并通过方法切换编辑状态。双击时设置为编辑模式，失去焦点或按下回车键时退出编辑模式。
<script>
export default {
data() {
return {
isEditing: false,
content: '双击编辑内容'
}
},
methods: {
startEditing() {
this.isEditing = true
this.$nextTick(() => {
this.$refs.input.focus()
})
},
stopEditing() {
this.isEditing = false
}
}
}
</script>自动聚焦输入框
使用 $nextTick 确保 DOM 更新后聚焦输入框。在 startEditing 方法中调用 this.$refs.input.focus()，确保输入框在编辑模式下自动获得焦点。
支持回车确认
通过 @keyup.enter 监听回车键事件，触发 stopEditing 方法。这样用户可以通过回车键快速确认编辑内容。
样式优化
为编辑状态和非编辑状态添加样式区分，提升用户体验。例如，非编辑状态下显示为普通文本，编辑状态下显示为输入框。
<style>
span {
padding: 5px;
cursor: pointer;
}
input {
padding: 5px;
border: 1px solid #ccc;
}
</style>完整示例
将上述代码整合为一个完整的 Vue 组件，实现双击编辑功能。用户双击文本进入编辑模式，编辑完成后通过失去焦点或回车键退出编辑模式。
<template>
<div>
<span v-if="!isEditing" @dblclick="startEditing">{{ content }}</span>
<input
v-else
v-model="content"
@blur="stopEditing"
@keyup.enter="stopEditing"
ref="input"
/>
</div>
</template>
<script>
export default {
data() {
return {
isEditing: false,
content: '双击编辑内容'
}
},
methods: {
startEditing() {
this.isEditing = true
this.$nextTick(() => {
this.$refs.input.focus()
})
},
stopEditing() {
this.isEditing = false
}
}
}
</script>
<style>
span {
padding: 5px;
cursor: pointer;
}
input {
padding: 5px;
border: 1px solid #ccc;
}
</style>
