左键选择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>
相关推荐
Mr_Xuhhh40 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js