左键选择v-html绑定的文本内容,松开鼠标后出现复制弹窗

HTML

html 复制代码
<template>
  <div class="report_generate_wrap" id="parentElement">
    <div ref="textContainer" @mouseup="mouseUp" v-html="textContent"></div>
    <div v-if="showCopyPopup" :style="copyPopupStyle" class="copy-popup">
      <p>已选中文本,点击复制:</p>
      <button @click="copyText" style="margin-right: 10px">复制</button>
      <button @click="hideCopyPopup">取消</button>
    </div>
  </div>
</template>

JS

javascript 复制代码
data() {
    return {
      textContent: "这是一段示例文本,你可以尝试选中它。",
      showCopyPopup: false,
      selectedText: "",
      lastMousePosition: { x: 0, y: 0 },
      previousSelectedText: "",
    };
  },

computed: {
  copyPopupStyle() {
    return {
      position: "absolute",
      left: `${this.lastMousePosition.x + 20}px`, // 假设弹窗距离鼠标右侧20px
      top: `${this.lastMousePosition.y}px`,
      transform: "translateY(-50%)", // 垂直居中
    };
  },
},

mounted() {
  window.addEventListener("click", this.handleGlobalClick);
},

beforeDestroy() {
  window.removeEventListener("click", this.handleGlobalClick);
},

methods: {
  handleGlobalClick(event) {
    // 如果点击事件不是发生在textContainer元素内,则隐藏复制弹窗
    if (!this.$refs.textContainer.contains(event.target)) {
      this.showCopyPopup = false;
    }
  },
  mouseUp(event) {
    console.log("鼠标松开");
    this.updateMousePosition(event);
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      this.selectedText = range.toString().trim();

      // 检查当前选中的文本是否与之前选中的文本不同
      if (this.selectedText !== this.previousSelectedText) {
        if (this.selectedText !== "") {
          this.showCopyPopup = true;
        } else {
          this.showCopyPopup = false;
        }
        // 更新之前选中的文本
        this.previousSelectedText = this.selectedText;
      } else {
        // 如果相同,则不显示复制弹出框
        this.showCopyPopup = false;
      }
    } else {
      this.showCopyPopup = false;
      this.selectedText = "";
      this.previousSelectedText = ""; // 清除之前选中的文本
    }
  },
  updateMousePosition(event) {
    const parentElement = document.getElementById("parentElement");
    this.lastMousePosition = {
      x: event.clientX - parentElement.getBoundingClientRect().left,//鼠标相对于父元素的位置
      y: event.clientY,
    };
  },

  copyText() {
    const textarea = document.createElement("textarea");
    textarea.value = this.selectedText;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
    this.hideCopyPopup();
  },
  hideCopyPopup() {
    this.showCopyPopup = false;
  },
}

CSS

javascript 复制代码
<style scoped lang="less">
.copy-popup {
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
}
</style>
相关推荐
小远yyds12 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试