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

HTML

1. <template>
2.   <div class="report_generate_wrap" id="parentElement">
3.     <div ref="textContainer" @mouseup="mouseUp" v-html="textContent"></div>
4.     <div v-if="showCopyPopup" :style="copyPopupStyle" class="copy-popup">
5.       <p>已选中文本，点击复制：</p>
6.       <button @click="copyText" style="margin-right: 10px">复制</button>
7.       <button @click="hideCopyPopup">取消</button>
8.     </div>
9.   </div>
10. </template>

复制代码

 JS

1. data() {
2.     return {
3.       textContent: "这是一段示例文本，你可以尝试选中它。",
4.       showCopyPopup: false,
5.       selectedText: "",
6.       lastMousePosition: { x: 0, y: 0 },
7.       previousSelectedText: "",
8.     };
9.   },
11. computed: {
12.   copyPopupStyle() {
13.     return {
14.       position: "absolute",
15.       left: `${this.lastMousePosition.x + 20}px`, // 假设弹窗距离鼠标右侧20px
16.       top: `${this.lastMousePosition.y}px`,
17.       transform: "translateY(-50%)", // 垂直居中
18.     };
19.   },
20. },
22. mounted() {
23.   window.addEventListener("click", this.handleGlobalClick);
24. },
26. beforeDestroy() {
27.   window.removeEventListener("click", this.handleGlobalClick);
28. },
30. methods: {
31.   handleGlobalClick(event) {
32.     // 如果点击事件不是发生在textContainer元素内，则隐藏复制弹窗
33.     if (!this.$refs.textContainer.contains(event.target)) {
34.       this.showCopyPopup = false;
35.     }
36.   },
37.   mouseUp(event) {
38.     console.log("鼠标松开");
39.     this.updateMousePosition(event);
40.     const selection = window.getSelection();
41.     if (selection.rangeCount > 0) {
42.       const range = selection.getRangeAt(0);
43.       this.selectedText = range.toString().trim();
45.       // 检查当前选中的文本是否与之前选中的文本不同
46.       if (this.selectedText !== this.previousSelectedText) {
47.         if (this.selectedText !== "") {
48.           this.showCopyPopup = true;
49.         } else {
50.           this.showCopyPopup = false;
51.         }
52.         // 更新之前选中的文本
53.         this.previousSelectedText = this.selectedText;
54.       } else {
55.         // 如果相同，则不显示复制弹出框
56.         this.showCopyPopup = false;
57.       }
58.     } else {
59.       this.showCopyPopup = false;
60.       this.selectedText = "";
61.       this.previousSelectedText = ""; // 清除之前选中的文本
62.     }
63.   },
64.   updateMousePosition(event) {
65.     const parentElement = document.getElementById("parentElement");
66.     this.lastMousePosition = {
67.       x: event.clientX - parentElement.getBoundingClientRect().left,//鼠标相对于父元素的位置
68.       y: event.clientY,
69.     };
70.   },
72.   copyText() {
73.     const textarea = document.createElement("textarea");
74.     textarea.value = this.selectedText;
75.     document.body.appendChild(textarea);
76.     textarea.select();
77.     document.execCommand("copy");
78.     document.body.removeChild(textarea);
79.     this.hideCopyPopup();
80.   },
81.   hideCopyPopup() {
82.     this.showCopyPopup = false;
83.   },
84. }

复制代码

 CSS

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。