使用vue3实现对话气泡长按选中全部内容(可自由拖动选择)同时弹出自定义菜单弹窗(如复制,删除等)的功能

可以使用Vue3的自定义指令来实现对话气泡的长按选中全部内容和自由拖动选择功能，同时使用element-ui等UI框架的弹窗组件来实现自定义菜单的弹窗。

以下是实现的具体步骤：

1. 定义一个自定义指令`v-selectable`，在该指令中实现长按选中和自由拖动选择功能。

// v-selectable.js
export default {
  mounted(el) {
    let isDragging = false;
    let startX, startY, endX, endY;
    let selection = document.getSelection();

    el.addEventListener("mousedown", e => {
      startX = e.clientX;
      startY = e.clientY;
      isDragging = true;
    });

    el.addEventListener("mousemove", e => {
      if (isDragging) {
        endX = e.clientX;
        endY = e.clientY;

        const range = document.createRange();
        range.setStart(el, 0);
        range.setEnd(el, 1);

        const rect = range.getBoundingClientRect();
        const left = Math.min(startX, endX) - rect.left;
        const top = Math.min(startY, endY) - rect.top;
        const width = Math.abs(endX - startX);
        const height = Math.abs(endY - startY);

        const box = `${left}px ${top}px ${width}px ${height}px`;

        el.style.userSelect = "none";
        el.style.webkitUserSelect = "none";
        el.style.MozUserSelect = "none";
        el.style.msUserSelect = "none";
        el.style.oUserSelect = "none";
        el.style.cursor = "default";
        el.style.position = "relative";

        const selectionBox = document.createElement("div");
        selectionBox.classList.add("selection-box");
        selectionBox.style.position = "absolute";
        selectionBox.style.left = left + "px";
        selectionBox.style.top = top + "px";
        selectionBox.style.width = width + "px";
        selectionBox.style.height = height + "px";
        selectionBox.style.background = "rgba(0, 0, 255, 0.2)";
        selectionBox.style.border = "1px dashed #000";
        selectionBox.style.zIndex = "9999";
        selectionBox.style.pointerEvents = "none";
        selectionBox.style.boxSizing = "border-box";
        selectionBox.style.transform = `translate(${rect.left}px, ${rect.top}px)`;

        el.appendChild(selectionBox);

        selection.removeAllRanges();
        range.selectNodeContents(el);
        selection.addRange(range);
      }
    });

    el.addEventListener("mouseup", e => {
      isDragging = false;

      const selectionBox = el.querySelector(".selection-box");
      if (selectionBox) {
        el.removeChild(selectionBox);
      }

      el.style.userSelect = "auto";
      el.style.webkitUserSelect = "auto";
      el.style.MozUserSelect = "auto";
      el.style.msUserSelect = "auto";
      el.style.oUserSelect = "auto";
      el.style.cursor = "text";
    });
  }
};

2. 在对话气泡组件中使用该自定义指令，并添加一个`contextmenu`事件来触发自定义菜单的弹窗。

<template>
  <div class="bubble" v-selectable @contextmenu.prevent="showMenu">
    <div class="content">{{ message }}</div>
  </div>
</template>

<script>
import vSelectable from "@/directives/v-selectable";

export default {
  directives: {
    selectable: vSelectable
  },
  props: {
    message: {
      type: String,
      default: ""
    }
  },
  methods: {
    showMenu(e) {
      // 在此处弹出自定义菜单的弹窗
    }
  }
};
</script>

<style scoped>
.bubble {
  display: inline-block;
  max-width: 80%;
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  cursor: text;
  position: relative;
}

.bubble .content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>

3. 在自定义菜单的弹窗组件中定义相应的菜单项，如复制、删除等。

<template>
  <div>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-more"></i>
      </span>
      <el-dropdown-menu>
        <el-dropdown-item command="copy">复制</el-dropdown-item>
        <el-dropdown-item command="delete">删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      switch (command) {
        case "copy":
          document.execCommand("copy");
          break;
        case "delete":
          // 在此处执行删除操作
          break;
      }
    }
  }
};
</script>

4. 在对话气泡组件中引入自定义菜单的弹窗组件，并在`showMenu`方法中调用弹窗组件的`$refs`属性来显示弹窗。

<template>
  <div class="bubble" v-selectable @contextmenu.prevent="showMenu">
    <div class="content">{{ message }}</div>
    <custom-menu ref="menu"></custom-menu>
  </div>
</template>

<script>
import vSelectable from "@/directives/v-selectable";
import CustomMenu from "@/components/CustomMenu";

export default {
  directives: {
    selectable: vSelectable
  },
  props: {
    message: {
      type: String,
      default: ""
    }
  },
  components: {
    CustomMenu
  },
  methods: {
    showMenu(e) {
      const menu = this.$refs.menu;
      menu.$el.style.left = e.pageX + "px";
      menu.$el.style.top = e.pageY + "px";
      menu.$el.style.display = "block";
    }
  }
};
</script>

以上就是使用Vue3实现对话气泡长按选中全部内容并弹出自定义菜单的具体步骤。