vue双击实现编辑

Vue 双击实现编辑功能

在 Vue 中实现双击编辑功能，可以通过监听 dblclick 事件并结合动态渲染输入框或文本内容来实现。以下是具体实现方法：

基础实现

使用 v-on 或 @ 监听双击事件，切换编辑状态：

<template>
  <div>
    <span v-if="!isEditing" @dblclick="startEditing">{{ content }}</span>
    <input
      v-else
      v-model="content"
      @blur="stopEditing"
      @keyup.enter="stopEditing"
      ref="inputField"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '双击编辑内容',
      isEditing: false
    };
  },
  methods: {
    startEditing() {
      this.isEditing = true;
      this.$nextTick(() => {
        this.$refs.inputField.focus();
      });
    },
    stopEditing() {
      this.isEditing = false;
    }
  }
};
</script>

封装为可复用组件

将逻辑封装为组件，便于多处调用：

<!-- EditableText.vue -->
<template>
  <div class="editable-text">
    <span v-if="!editing" @dblclick="edit">{{ value }}</span>
    <input
      v-else
      type="text"
      v-model="localValue"
      @blur="save"
      @keyup.enter="save"
      ref="input"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      editing: false,
      localValue: this.value
    };
  },
  methods: {
    edit() {
      this.editing = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    save() {
      this.editing = false;
      this.$emit('input', this.localValue);
    }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal;
    }
  }
};
</script>

使用自定义指令

通过自定义指令简化双击编辑逻辑：

// 注册全局指令
Vue.directive('edit-on-dblclick', {
  bind(el, binding, vnode) {
    let originalValue = binding.value;
    let input = document.createElement('input');

    el.addEventListener('dblclick', () => {
      input.value = originalValue;
      el.style.display = 'none';
      el.parentNode.insertBefore(input, el);
      input.focus();

      input.addEventListener('blur', () => {
        el.style.display = '';
        originalValue = input.value;
        vnode.context[binding.expression] = input.value;
        el.parentNode.removeChild(input);
      });

      input.addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
          input.blur();
        }
      });
    });
  }
});

结合第三方库

使用像 v-editable 这样的第三方库快速实现：

npm install v-editable

import Editable from 'v-editable';
Vue.use(Editable);

<template>
  <div v-editable="content" @edited="content = $event"></div>
</template>

样式优化

添加过渡效果提升用户体验：

.editable-text {
  transition: all 0.3s ease;
}

.editable-text input {
  border: 1px solid #ddd;
  padding: 4px;
  outline: none;
}

这些方法涵盖了从基础实现到高级封装的多种方案，可根据项目需求选择合适的方式。核心思路是通过事件监听切换编辑状态，并处理好数据绑定与焦点管理。