笔记

src/views/bookShelf/components/NotesModel.vue

@@ -41,7 +41,7 @@
           :key="'detail' + index"
         >
             <template v-if="index!==0">
-                <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}">
+                <span v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}" @mousedown="mouseupClick(pItem)">
                         {{ pItem.text }}
                 </span>
             </template>
@@ -55,7 +55,6 @@
 <script>
 import AudioLine from "@/components/common/AudioLine.vue"
 import Highlighter from 'web-highlighter';
-let highlighter = null
 export default {
   name: "ArticleView",
   props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo"],
@@ -107,7 +106,9 @@ export default {
       ],
       articleImg: {}, // 文章图片
       tokensArr: [],
-      sentenceList: []
+      sentenceList: [],
+      notesId: '',
+      highlighter: null
     };
   },
   computed: {
@@ -120,6 +121,7 @@ export default {
     },
   },
   watch: {
+    
   },
   //方法集合
   methods: {
@@ -127,7 +129,7 @@ export default {
       this.curTime = curTime * 1000;
     },
     handleData() {
-        let explainNumber = 1
+        let _this = this
         let resArr = [];
         let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
         this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
@@ -153,26 +155,35 @@ export default {
             resArr[item.pno].wordsList.push(item)
         });
         this.resArr = resArr;
-        highlighter = new Highlighter({
-    $root: document.getElementById("notes-model"),
-    exceptSelectors: ['pre', 'code']
-});
-      highlighter
-        .on('selection:hover', ({id}) => {
-            // 通过添加 class，实现类似 hover 效果
-            highlighter.addClass('highlight-wrap-hover', id);
-        })
-        .on('selection:hover-out', ({id}) => {
-            // 鼠标离开时清除悬停样式
-            highlighter.removeClass('highlight-wrap-hover', id);
-        })
-        .on('selection:create', ({sources}) => {
-            // sources = sources.map(hs => ({hs}));
-            console.log(sources)
-            // 存储
-            // store.save(sources);
-        });
-      highlighter.run()
+        setTimeout(() => {
+            _this.highlighter = new Highlighter({
+                $root: document.getElementById("notes-model"),
+                exceptSelectors: ['pre', 'code']
+            });
+            _this.highlighter
+                .on('selection:hover', ({id}) => {
+                    // 通过添加 class，实现类似 hover 效果
+                    _this.highlighter.addClass('highlight-wrap-hover', id);
+                })
+                .on('selection:hover-out', ({id}) => {
+                    // 鼠标离开时清除悬停样式
+                    _this.highlighter.removeClass('highlight-wrap-hover', id);
+                })
+                .on('selection:create', ({sources}) => {
+                    // sources = sources.map(hs => ({hs}));
+                    console.log(sources)
+                    this.notesId = sources[0].id
+                    // 存储
+                    // store.save(sources);
+                });
+            _this.highlighter.run()
+        }, 1000);
+    },
+    mouseupClick(obj){
+        setTimeout(() => {
+            console.log(obj)
+            console.log(this.notesId)
+        }, 300);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -187,7 +198,9 @@ export default {
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
+  beforeDestroy() {
+    this.highlighter.dispose()
+  }, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -321,4 +334,11 @@ export default {
         width: 430px;
     }
 }
+</style>
+<style lang="scss">
+.highlight-mengshou-wrap{
+    background: #FFF3B7 !important;
+    text-decoration: underline dotted;
+    text-decoration-color: #175DFF;
+}
 </style>

src/views/bookShelf/components/PrintModel.vue

@@ -539,7 +539,10 @@ export default {
         this.$nextTick(() => {
             document.onselectstart = new Function("event.returnValue=false");
         })
-    }
+    },
+    beforeDestroy() {
+        document.onselectstart = new Function("event.returnValue=true");
+    }, 
 };
 </script>
 <style lang="scss" scoped>