实用组件:双击重命名

最新推荐文章于 2024-08-02 12:03:55 发布

Georgia fab

最新推荐文章于 2024-08-02 12:03:55 发布

阅读量304

点赞数 1

分类专栏： vue 项目小笔记文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_27314517/article/details/128675208

版权

项目小笔记同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

vue

15 篇文章 1 订阅

订阅专栏

该代码段展示了一个Vue组件，它处理元素的双击事件来切换编辑模式，使用`<el-input>`进行编辑，并在输入后更新模型值。同时，它还防止了双击事件触发单击事件，并在用户完成后调用successRename函数。

摘要由CSDN通过智能技术生成

<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>