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

尼古拉斯网页匠

已于 2024-09-20 12:12:07 修改

阅读量497

点赞数 3

文章标签： html 前端 javascript

于 2024-09-20 12:08:28 首次发布

本文链接：https://blog.csdn.net/y1059477028/article/details/142379435

版权

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

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

<style scoped lang="less">
.copy-popup {
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
}
</style>