隐藏标记词

src/views/bookShelf/components/LexicalType.vue

@@ -8,25 +8,37 @@
                     itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':''
                 ]">
                 <template v-if="itemR.isShow">
-                    <span
-                        class="NNPE-chs"
-                        :class="[
-                            itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':''
-                        ]"
-                        :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(itemR.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[itemR.sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(itemR.tokens[11])>-1?vocabularyType[itemR.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
-                        >{{ itemR.tokens[2] }}</span
-                    >
-                    <span
-                        class="NNPE-chs NNPE-chs-both"
-                        v-if="resArr[0].wordsList[indexR + 1] &&
-                        resArr[0].wordsList[indexR + 1].tokens[2] &&
-                        enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
-                        :class="[
-                                resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':''
+                    <div class="wordshasbottom">
+                        <span
+                            class="NNPE-chs"
+                            :class="[
+                                itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':'',selectWordType.indexOf(itemR.tokens[11])>-1?!hideSelectWord||itemR.showSelectWord?'':'word-opacity':''
                             ]"
-                        :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(resArr[0].wordsList[indexR + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[resArr[0].wordsList[indexR + 1].sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?vocabularyType[resArr[0].wordsList[indexR + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
-                        >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
-                    >
+                            :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(itemR.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[itemR.sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(itemR.tokens[11])>-1?vocabularyType[itemR.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
+                            @click="itemR.showSelectWord=!itemR.showSelectWord"
+                            >{{ itemR.tokens[2] }}</span
+                        >
+                        <div class="word-bottom" v-if="hideSelectWord&&selectWordType.indexOf(itemR.tokens[11])>-1">
+                            <span :style="{background:colorObj.titleColor}"></span>
+                        </div>
+                    </div>
+                    <div class="wordshasbottom" 
+                            v-if="resArr[0].wordsList[indexR + 1] &&
+                            resArr[0].wordsList[indexR + 1].tokens[2] &&
+                            enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1">
+                        <span
+                            class="NNPE-chs NNPE-chs-both"
+                            :class="[
+                                    resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':'',selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?!hideSelectWord||resArr[0].wordsList[indexR + 1].showSelectWord?'':'word-opacity':''
+                                ]"
+                            @click="resArr[0].wordsList[indexR + 1].showSelectWord=!resArr[0].wordsList[indexR + 1].showSelectWord"
+                            :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(resArr[0].wordsList[indexR + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[resArr[0].wordsList[indexR + 1].sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?vocabularyType[resArr[0].wordsList[indexR + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
+                            >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
+                        >
+                        <div class="word-bottom" v-if="hideSelectWord&&selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1">
+                            <span :style="{background:colorObj.titleColor}"></span>
+                        </div>
+                    </div>
                 </template>
             <!-- {{itemR.tokens[2]}} -->
             </span>
@@ -68,26 +80,38 @@
                             :class="[
                             'NNPE-words',
                             ]"
-                        >
-                            <span
-                                class="NNPE-chs"
+                        >   
+                            <div class="wordshasbottom">
+                                <span
+                                    class="NNPE-chs"
+                                    :class="[
+                                        pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':'',selectWordType.indexOf(pItem.tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
+                                    ]"
+                                    :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(pItem.tokens[11])>-1?vocabularyType[pItem.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
+                                    @click="pItem.showSelectWord=!pItem.showSelectWord"
+                                    >{{ pItem.tokens[2] }}</span
+                                >
+                                <div class="word-bottom" v-if="hideSelectWord&&selectWordType.indexOf(pItem.tokens[11])>-1">
+                                    <span :style="{background:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD'}"></span>
+                                </div>
+                            </div>
+                            <div class="wordshasbottom" v-if="item.wordsList[pIndex + 1] &&
+                                item.wordsList[pIndex + 1].tokens[2] &&
+                                enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1">
+                                <span
+                                class="NNPE-chs NNPE-chs-both"
+                                
                                 :class="[
-                                    pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(pItem.tokens[11])>-1?vocabularyType[pItem.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
-                                >{{ pItem.tokens[2] }}</span
-                            >
-                            <span
-                            class="NNPE-chs NNPE-chs-both"
-                            v-if="item.wordsList[pIndex + 1] &&
-                            item.wordsList[pIndex + 1].tokens[2] &&
-                            enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
-                            :class="[
-                                    item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':''
-                                ]"
-                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(item.wordsList[pIndex + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].color:sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?vocabularyType[item.wordsList[pIndex + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
-                            >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
-                            >
+                                        item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':'',selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?!hideSelectWord||pItem.showSelectWord?'':'word-opacity':''
+                                    ]"
+                                    :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(item.wordsList[pIndex + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].color:sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?vocabularyType[item.wordsList[pIndex + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
+                                    @click="item.wordsList[pIndex + 1].showSelectWord=!item.wordsList[pIndex + 1].showSelectWord"
+                                >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
+                                >
+                                <div class="word-bottom" v-if="hideSelectWord&&selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1">
+                                    <span :style="{background:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD'}"></span>
+                                </div>
+                            </div>
                         </div>
                     </template>
                 </template>
@@ -130,12 +154,13 @@
     </div>
     <div class="clear-box" v-if="showSearch">
         <h5>词汇标记设置</h5>
-        <div class="item" v-if="tabsIndex===0" @click="hideSelectWord=!hideSelectWord">
+        <div class="item" v-if="tabsIndex===0">
             <span>隐藏标记词</span>
             <el-switch
                 v-model="hideSelectWord"
                 active-color="#175DFF"
-                inactive-color="#D0D3D9">
+                inactive-color="#D0D3D9"
+                key="word-select">
             </el-switch>
         </div>
         <div class="item red-item" @click="clearSelect">
@@ -378,7 +403,8 @@ export default {
                 wIndex: indexs,
                 isShow: this.enFhList.indexOf(items[2])==-1,
                 marginRight: indexs===item.tokens.length-1,
-                sententLenType: sententLenType
+                sententLenType: sententLenType,
+                showSelectWord: false
             }
             resArr[item.pno].wordsList.push(obj)
         })
@@ -467,6 +493,26 @@ export default {
         border: 1px solid #FEF2A4;
         box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
     }
+    .word-opacity{
+        opacity: 0;
+    }
+    .wordshasbottom {
+      position: relative;
+    }
+    .word-bottom{
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        left: 0;
+        bottom: 2px;
+        padding: 0 3px;
+        span{
+            width: 100%;
+            height: 2px;
+            background: #2F3742;
+            display: block;
+        }
+    }
   }
   .table-box {
     // background: #f7f7f7;
@@ -495,9 +541,10 @@ export default {
     clear: both;
     overflow: hidden;
     display: flex;
-    .NNPE-words {
+    .wordshasbottom {
       float: left;
       padding: 0;
+      position: relative;
       &.noPadding{
           padding:0;
       }
@@ -535,12 +582,29 @@ export default {
             border: 1px solid #FEF2A4;
             box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
           }
+          &.word-opacity{
+            opacity: 0;
+          }
         }
         &.padding {
           padding: 0 3px;
           cursor: pointer;
         }
       }
+      .word-bottom{
+        width: 100%;
+        height: 1px;
+        position: absolute;
+        left: 0;
+        bottom: 2px;
+        padding: 0 3px;
+        span{
+            width: 100%;
+            height: 1px;
+            background: #2F3742;
+            display: block;
+        }
+      }
     }
   }
 }