<div class="box" v-move>
  <div class="header">標(biāo)簽1</div>
  <div @dblclick="startEditing" v-if="!isEditing">{{content}}</div>
  <input type="text" v-model="editedContent" @blur = 'stopEditing' v-if="isEditing">
</div>

import { Directive, DirectiveBinding } from "vue";
const vMove: Directive<any, void> = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 創(chuàng)建一個(gè)變量 moveElement，表示 DOM 元素的子元素（假設(shè)這是要拖動(dòng)的元素）
    const moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;
    // 鼠標(biāo)按下事件處理函數(shù)
    const mouseDown = (e: MouseEvent) => {
      // 計(jì)算鼠標(biāo)相對(duì)于元素的偏移量
      const X = e.clientX - el.offsetLeft;
      const Y = e.clientY - el.offsetTop;
      // 鼠標(biāo)移動(dòng)事件處理函數(shù)
      const move = (e: MouseEvent) => {
        // 更新元素的位置，實(shí)現(xiàn)拖動(dòng)效果
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
      };
      // 添加鼠標(biāo)移動(dòng)事件監(jiān)聽(tīng)器
      document.addEventListener("mousemove", move);
      // 添加鼠標(biāo)松開(kāi)事件監(jiān)聽(tīng)器，用于停止拖動(dòng)
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    // 將鼠標(biāo)按下事件處理函數(shù)添加到元素上
    moveElement.addEventListener("mousedown", mouseDown);
  },
};

<script setup lang="ts">
// 導(dǎo)入 Vue 和自定義指令相關(guān)的模塊
import { ref, Directive, DirectiveBinding } from "vue";
// 自定義指令 vMove 的實(shí)現(xiàn)
const vMove: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {
  // 獲取需要移動(dòng)的 DOM 元素，假設(shè)它是傳入元素的第一個(gè)子元素
  let moveElement: HTMLElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement);
  // 鼠標(biāo)按下事件處理函數(shù)
  const mouseDown = (e: MouseEvent) => {
    // 計(jì)算鼠標(biāo)點(diǎn)擊位置相對(duì)于元素左上角的偏移量
    let X = e.clientX - el.offsetLeft;
    let Y = e.clientY - el.offsetTop;
    // 鼠標(biāo)移動(dòng)事件處理函數(shù)
    const move = (e: MouseEvent) => {
      console.log(e);
      // 更新元素的位置，實(shí)現(xiàn)拖動(dòng)效果
      el.style.left = e.clientX - X + "px";
      el.style.top = e.clientY - Y + "px";
    };
    // 添加鼠標(biāo)移動(dòng)事件監(jiān)聽(tīng)器，以便拖動(dòng)元素
    document.addEventListener("mousemove", move);
    // 添加鼠標(biāo)松開(kāi)事件監(jiān)聽(tīng)器，停止拖動(dòng)
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move);
    });
  };
  // 將鼠標(biāo)按下事件處理函數(shù)添加到移動(dòng)元素上
  moveElement.addEventListener("mousedown", mouseDown);
  console.log(binding);
};
// 使用 ref 創(chuàng)建響應(yīng)式數(shù)據(jù)
const content = ref('內(nèi)容'); // 原始內(nèi)容
const isEditing = ref(false); // 是否處于編輯模式
const editedContent = ref(''); // 編輯后的內(nèi)容
// 進(jìn)入編輯模式
const startEditing = () => {
  isEditing.value = true;
  editedContent.value = content.value; // 將原始內(nèi)容設(shè)置為編輯后的內(nèi)容
}
// 退出編輯模式
const stopEditing = () => {
  isEditing.value = false;
  content.value = editedContent.value; // 保存編輯后的內(nèi)容
}
</script>
<template>
  <div class="box" v-move>
    <div class="header">標(biāo)簽1</div>
    <!-- 使用雙擊事件觸發(fā)編輯模式 -->
    <div @dblclick="startEditing" v-if="!isEditing">{{ content }}</div>
    <!-- 編輯模式下顯示輸入框 -->
    <input type="text" v-model="editedContent" @blur="stopEditing" v-if="isEditing">
  </div>
</template>
<style scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid;
  background: #f59c09;
  .header {
    height: 20px;
    background: #f59c09;
    color: white;
  }
}
</style>