From d836f9914d8d838c5991157006682c3e39d22716 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 22 五月 2024 10:20:04 +0800
Subject: [PATCH] css

---
 admin/src/components/common/tagsview.vue |  148 ++++++++++++++++++++++++++-----------------------
 1 files changed, 79 insertions(+), 69 deletions(-)

diff --git a/admin/src/components/common/tagsview.vue b/admin/src/components/common/tagsview.vue
index c5afffa..67df70f 100644
--- a/admin/src/components/common/tagsview.vue
+++ b/admin/src/components/common/tagsview.vue
@@ -1,50 +1,64 @@
 <template>
-  <div class="tags-view-style" style="display:flex; overflow-x: scroll;">
-    <i class="el-icon-arrow-left btn" v-if="leftStatus" :class="leftStatus?'nor-btn':'ban-btn'" @click="scrollToStart()"></i>
+  <div class="tags-view-style" style="display: flex; overflow-x: scroll">
+    <i
+      class="el-icon-arrow-left btn"
+      v-if="leftStatus"
+      :class="leftStatus ? 'nor-btn' : 'ban-btn'"
+      @click="scrollToStart()"
+    ></i>
     <div id="tags-box" ref="tags">
       <div
         v-for="(item, index) in tags"
         :key="index"
         :id="'tags-box-' + index"
-        @contextmenu.prevent="openMenu(item,$event)"
-        :class="isActive(item.url,index)?'active':''"
+        @contextmenu.prevent="openMenu(item, $event)"
+        :class="isActive(item.url, index) ? 'active' : ''"
         class="tagsview"
         @click="tagsmenu(item, index)"
       >
         {{ item.label }}
         <!-- 杩欎釜鍦版柟涓�瀹氳click鍔犱釜stop闃绘锛屼笉鐒朵細鍥犱负浜嬩欢鍐掓场涓�鐩磋Е鍙戠埗鍏冪礌鐨勭偣鍑讳簨浠讹紝鏃犳硶璺宠浆鍙︿竴涓矾鐢� -->
-        <span v-if="tags.length > 1" class="el-icon-close tagsicon" @click.stop="handleClose(item,index)"></span>
+        <span
+          v-if="tags.length > 1"
+          class="el-icon-close tagsicon"
+          @click.stop="handleClose(item, index)"
+        ></span>
         <!-- <ul v-show="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}">
           <li @click.stop="rightClose()">鍏抽棴</li>
           <li @click.stop="cleartags($route.path)">鍏抽棴鍏朵粬</li>
         </ul> -->
       </div>
     </div>
-    <i class="el-icon-arrow-right btn" v-if="rightStatus"  :class="rightStatus?'nor-btn':'ban-btn'" @click="scrollToEnd()"></i>
+    <i
+      class="el-icon-arrow-right btn"
+      v-if="rightStatus"
+      :class="rightStatus ? 'nor-btn' : 'ban-btn'"
+      @click="scrollToEnd()"
+    ></i>
   </div>
 </template>
 
 <script>
-//杩欎釜灏辨槸瀵煎叆vuex鐨勬暟鎹紝閰嶅悎涓嬮潰...map鐢�
-import { mapState, mapMutations } from "vuex";
+// 杩欎釜灏辨槸瀵煎叆vuex鐨勬暟鎹紝閰嶅悎涓嬮潰...map鐢�
+import { mapState, mapMutations } from 'vuex'
 export default {
   data() {
     return {
-      //鍙抽敭鑿滃崟闅愯棌瀵瑰簲甯冨皵鍊�
+      // 鍙抽敭鑿滃崟闅愯棌瀵瑰簲甯冨皵鍊�
       visible: false,
-      //鍙抽敭鑿滃崟瀵瑰簲浣嶇疆
+      // 鍙抽敭鑿滃崟瀵瑰簲浣嶇疆
       top: 0,
       left: 0,
       leftStatus: false,
-      rightStatus: false,
+      rightStatus: false
     }
   },
   computed: {
-    //寮曞叆vuex涓璼tate涓殑tags鏁版嵁锛屼竴鏍穞his璋冪敤灏辫
-    ...mapState(["tags"]),
+    // 寮曞叆vuex涓璼tate涓殑tags鏁版嵁锛屼竴鏍穞his璋冪敤灏辫
+    ...mapState(['tags'])
   },
-  watch:{
-    //鐩戝惉鍙抽敭鑿滃崟鐨勫�兼槸鍚︿负true锛屽鏋滄槸灏卞垱寤哄叏灞�鐩戝惉鐐瑰嚮浜嬩欢锛岃Е鍙慶loseMenu浜嬩欢闅愯棌鑿滃崟锛屽鏋滄槸false灏卞垹闄ょ洃鍚�
+  watch: {
+    // 鐩戝惉鍙抽敭鑿滃崟鐨勫�兼槸鍚︿负true锛屽鏋滄槸灏卞垱寤哄叏灞�鐩戝惉鐐瑰嚮浜嬩欢锛岃Е鍙慶loseMenu浜嬩欢闅愯棌鑿滃崟锛屽鏋滄槸false灏卞垹闄ょ洃鍚�
     visible(value) {
       if (value) {
         document.body.addEventListener('click', this.closeMenu)
@@ -52,10 +66,10 @@
         document.body.removeEventListener('click', this.closeMenu)
       }
     },
-    $route(to,from){
+    $route(to, from) {
       this.tags.forEach((item, index) => {
         if (item.url === to.path) {
-          let tagsDiv = document.getElementById('tags-box')
+          const tagsDiv = document.getElementById('tags-box')
           if (index) {
             tagsDiv.scrollTo(index * 110, 0)
           } else {
@@ -68,109 +82,106 @@
   },
   mounted() {
     this.$refs.tags.addEventListener('scroll', e => {
-      
       if (this.$refs.tags.scrollLeft > 0) {
         this.leftStatus = true
       } else {
         this.leftStatus = false
       }
       if (this.$refs.tags.scrollLeft + this.$refs.tags.clientWidth < this.$refs.tags.scrollWidth) {
-       this.rightStatus = true
+        this.rightStatus = true
       } else {
         this.rightStatus = false
       }
-
     }, false)
   },
   methods: {
-    //寮曞叆vuex涓璵utation鏂规硶锛屽彲浠ョ洿鎺his.xxx璋冪敤浠�
-    ...mapMutations(["closeTab", "cleartagsview"]),
-    //鐐瑰嚮鍙夊弶鍒犻櫎鐨勪簨浠�
+    // 寮曞叆vuex涓璵utation鏂规硶锛屽彲浠ョ洿鎺his.xxx璋冪敤浠�
+    ...mapMutations(['closeTab', 'cleartagsview']),
+    // 鐐瑰嚮鍙夊弶鍒犻櫎鐨勪簨浠�
     rightClose() {
       this.visible = false
       if (this.tags.length == 1) {
         return
       }
-      let index = this.tags.indexOf(this.selectedTag)
+      const index = this.tags.indexOf(this.selectedTag)
       this.handleClose(this.selectedTag, index)
     },
     handleClose(item, index) {
       if (this.tags.length == 1) {
         return
       }
-      //鍏堟妸闀垮害淇濆瓨涓嬫潵鍚庨潰鐢ㄦ潵姣旇緝鍋氬垽鏂潯浠�
-      let length = this.tags.length - 1;
-      //vuex璋冩柟娉�,涓婇潰...map寮曞叆鐨剉uex鏂规硶锛屼笉浼氳繖绉嶆柟娉曠殑鐪媣ue瀹樼綉鏂囨。
-      this.closeTab(item);
+      // 鍏堟妸闀垮害淇濆瓨涓嬫潵鍚庨潰鐢ㄦ潵姣旇緝鍋氬垽鏂潯浠�
+      const length = this.tags.length - 1
+      // vuex璋冩柟娉�,涓婇潰...map寮曞叆鐨剉uex鏂规硶锛屼笉浼氳繖绉嶆柟娉曠殑鐪媣ue瀹樼綉鏂囨。
+      this.closeTab(item)
       // 濡傛灉鍏抽棴鐨勬爣绛句笉鏄綋鍓嶈矾鐢辩殑璇濓紝灏变笉璺宠浆
       if (item.url !== this.$route.path) {
-        return;
+        return
       }
       // 鍒ゆ柇锛氬鏋渋ndex鍜宭ength鏄竴鏍风殑锛岄偅灏变唬琛ㄩ兘鏄竴鏍风殑闀垮害锛屽氨鏄渶鍚庝竴浣嶏紝閭ｅ氨寰�宸﹁烦杞竴涓�
       if (index === length) {
-        //鍐嶅垽鏂細濡傛灉length=0锛屼篃灏辨槸璇翠綘鍒犲畬浜嗘墍鏈夋爣绛�
+        // 鍐嶅垽鏂細濡傛灉length=0锛屼篃灏辨槸璇翠綘鍒犲畬浜嗘墍鏈夋爣绛�
         if (length === 0) {
-          //閭ｄ箞鍐嶅垽鏂細濡傛灉褰撳墠璺敱涓嶇瓑浜巌ndex锛屼篃灏辨槸鎴戦椤电殑璺敱
-          if (this.$route.path !== "/index") {
-            //閭ｄ箞灏辫烦杞椤点�傝繖涓�姝ョ殑鎰忔�濇槸锛氬鏋滃垹闄ょ殑鏈�鍚庝竴涓爣绛句笉鏄椤靛氨缁熶竴璺宠浆棣栭〉锛屽鏋滀綘鍒犻櫎鐨勬渶鍚庝竴涓爣绛炬槸棣栭〉鏍囩锛屽凡缁忓湪杩欎釜棣栭〉璺敱涓婁簡锛屼綘杩樿烦涓粈涔堝憿銆傝繖涓嶉噸澶嶆搷浣滀簡鍚椼��
-            this.$router.push({ path: "/index" });
+          // 閭ｄ箞鍐嶅垽鏂細濡傛灉褰撳墠璺敱涓嶇瓑浜巌ndex锛屼篃灏辨槸鎴戦椤电殑璺敱
+          if (this.$route.path !== '/index') {
+            // 閭ｄ箞灏辫烦杞椤点�傝繖涓�姝ョ殑鎰忔�濇槸锛氬鏋滃垹闄ょ殑鏈�鍚庝竴涓爣绛句笉鏄椤靛氨缁熶竴璺宠浆棣栭〉锛屽鏋滀綘鍒犻櫎鐨勬渶鍚庝竴涓爣绛炬槸棣栭〉鏍囩锛屽凡缁忓湪杩欎釜棣栭〉璺敱涓婁簡锛屼綘杩樿烦涓粈涔堝憿銆傝繖涓嶉噸澶嶆搷浣滀簡鍚椼��
+            this.$router.push({ path: '/index' })
           }
         } else {
-          //閭ｄ箞锛屽鏋滀笂闈㈢殑鏉′欢閮戒笉鎴愮珛锛屾病鏈塴ength=0.涔熷氨鏄浣犺繕鏈夊ソ鍑犱釜鏍囩锛屽苟涓斾綘鍒犻櫎鐨勬槸鏈�鍚庝竴浣嶆爣绛撅紝閭ｄ箞灏卞線宸﹁竟鎸竴浣嶈烦杞矾鐢�
-          this.$router.push({ path: this.tags[index - 1].url });
+          // 閭ｄ箞锛屽鏋滀笂闈㈢殑鏉′欢閮戒笉鎴愮珛锛屾病鏈塴ength=0.涔熷氨鏄浣犺繕鏈夊ソ鍑犱釜鏍囩锛屽苟涓斾綘鍒犻櫎鐨勬槸鏈�鍚庝竴浣嶆爣绛撅紝閭ｄ箞灏卞線宸﹁竟鎸竴浣嶈烦杞矾鐢�
+          this.$router.push({ path: this.tags[index - 1].url })
         }
       } else {
         // 濡傛灉浣犵偣鍑讳笉鏄渶鍚庝竴浣嶆爣绛撅紝鐐圭殑鍓嶉潰鐨勶紝閭ｅ氨寰�鍙宠竟璺宠浆
-        this.$router.push({ path: this.tags[index].url });
+        this.$router.push({ path: this.tags[index].url })
       }
     },
-    //鐐瑰嚮璺宠浆璺敱
+    // 鐐瑰嚮璺宠浆璺敱
     tagsmenu(item, index) {
-      console.log('tagsmenu');
-      //鍒ゆ柇锛氬綋鍓嶈矾鐢变笉绛変簬褰撳墠閫変腑椤圭殑url锛屼篃灏变唬琛ㄤ綘鐐瑰嚮鐨勪笉鏄幇鍦ㄩ�変腑鐨勬爣绛撅紝鏄彟涓�涓爣绛惧氨璺宠浆杩囧幓锛屽鏋滀綘鐐瑰嚮鐨勬槸鐜板湪宸茬粡閫変腑鐨勬爣绛惧氨涓嶇敤璺宠浆浜嗭紝鍥犱负浣犲凡缁忓湪杩欎釜璺敱浜嗚繕璺充粈涔堝憿銆�
+      console.log('tagsmenu')
+      // 鍒ゆ柇锛氬綋鍓嶈矾鐢变笉绛変簬褰撳墠閫変腑椤圭殑url锛屼篃灏变唬琛ㄤ綘鐐瑰嚮鐨勪笉鏄幇鍦ㄩ�変腑鐨勬爣绛撅紝鏄彟涓�涓爣绛惧氨璺宠浆杩囧幓锛屽鏋滀綘鐐瑰嚮鐨勬槸鐜板湪宸茬粡閫変腑鐨勬爣绛惧氨涓嶇敤璺宠浆浜嗭紝鍥犱负浣犲凡缁忓湪杩欎釜璺敱浜嗚繕璺充粈涔堝憿銆�
       if (this.$route.path !== item.url) {
-        //鐢╬ath鐨勮烦杞柟娉曟妸褰撳墠椤圭殑url褰撲綔鍦板潃璺宠浆銆�
-        this.$router.push({ path: item.url });
-        let tagsDiv = document.getElementById('tags-box')
+        // 鐢╬ath鐨勮烦杞柟娉曟妸褰撳墠椤圭殑url褰撲綔鍦板潃璺宠浆銆�
+        this.$router.push({ path: item.url })
+        const tagsDiv = document.getElementById('tags-box')
         if (index) {
           tagsDiv.scrollTo(index * 110, 0)
         }
       }
     },
-    //閫氳繃鍒ゆ柇璺敱涓�鑷磋繑鍥炲竷灏斿�兼坊鍔燾lass锛屾坊鍔犻珮浜晥鏋�
+    // 閫氳繃鍒ゆ柇璺敱涓�鑷磋繑鍥炲竷灏斿�兼坊鍔燾lass锛屾坊鍔犻珮浜晥鏋�
     isActive(route, index) {
-      let res = route === this.$route.path
+      const res = route === this.$route.path
       return res
     },
     scrollToStart() {
-
-      let tagsDiv = document.getElementById('tags-box')
+      const tagsDiv = document.getElementById('tags-box')
       tagsDiv.scrollTo(0, 0)
-    }, 
+    },
     scrollToEnd() {
-      let tagsDiv = document.getElementById('tags-box')
+      const tagsDiv = document.getElementById('tags-box')
       tagsDiv.scrollTo(tagsDiv.scrollWidth, 0)
     },
-    //鍙抽敭浜嬩欢锛屾樉绀哄彸閿彍鍗曪紝骞跺浐瀹氬ソ浣嶇疆銆�
+    // 鍙抽敭浜嬩欢锛屾樉绀哄彸閿彍鍗曪紝骞跺浐瀹氬ソ浣嶇疆銆�
     openMenu(tag, e) {
       this.visible = true
       this.selectedTag = tag
       const offsetLeft = this.$el.getBoundingClientRect().left
-      console.log(tag, e);
-      this.left = e.clientX - offsetLeft + 60  //鍙抽敭鑿滃崟璺濈宸﹁竟鐨勮窛绂�
-      this.top = e.clientY +20  //鍙抽敭鑿滃崟璺濈涓婇潰鐨勮窛绂�           杩欎袱涓彲浠ユ洿鏀癸紝鐪嬬湅鑷繁鐨勫彸閿彍鍗曞湪浠�涔堜綅缃紝鑷繁璋�
+      console.log(tag, e)
+      this.left = e.clientX - offsetLeft + 60 // 鍙抽敭鑿滃崟璺濈宸﹁竟鐨勮窛绂�
+      this.top = e.clientY + 20 // 鍙抽敭鑿滃崟璺濈涓婇潰鐨勮窛绂�           杩欎袱涓彲浠ユ洿鏀癸紝鐪嬬湅鑷繁鐨勫彸閿彍鍗曞湪浠�涔堜綅缃紝鑷繁璋�
     },
-    //闅愯棌鍙抽敭鑿滃崟
+    // 闅愯棌鍙抽敭鑿滃崟
     closeMenu() {
       this.visible = false
     },
-    //鍙抽敭鑿滃崟鍏抽棴鎵�鏈夐�夐」锛岃Е鍙憊uex涓殑鏂规硶锛屾妸褰撳墠璺敱褰撳弬鏁颁紶杩囧幓鐢ㄤ簬鍒ゆ柇
-    cleartags(val){
+    // 鍙抽敭鑿滃崟鍏抽棴鎵�鏈夐�夐」锛岃Е鍙憊uex涓殑鏂规硶锛屾妸褰撳墠璺敱褰撳弬鏁颁紶杩囧幓鐢ㄤ簬鍒ゆ柇
+    cleartags(val) {
       this.visible = false
       this.cleartagsview(val)
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -183,13 +194,13 @@
   color: #666;
   cursor: pointer;
   &:hover {
-    color: #2E68EC;
+    color: #4d99a8;
   }
 }
 
 .ban-btn {
   color: #999;
-  cursor:not-allowed
+  cursor: not-allowed;
 }
 
 #tags-box {
@@ -200,11 +211,11 @@
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
   &::-webkit-scrollbar {
-      display: none; /* Chrome Safari */
-    }
+    display: none; /* Chrome Safari */
+  }
 }
 #tags-box::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
+  display: none; /* Chrome Safari */
 }
 //鏍囩瀵艰埅鏍峰紡
 .tagsview {
@@ -218,16 +229,15 @@
   color: #000;
   font-size: 14px;
   display: inline-block;
-
 }
 //鍙夊彿榧犳爣缁忚繃鏍峰紡
-.tagsicon:hover{
+.tagsicon:hover {
   color: #f56c6c;
 }
 //鏍囩楂樹寒
-.active{
-  color: #2E68EC;
-  border-bottom: 2px solid #2E68EC;
+.active {
+  color: #4d99a8;
+  border-bottom: 2px solid #4d99a8;
 }
 //鍙抽敭鑿滃崟鏍峰紡
 .contextmenu {
@@ -241,7 +251,7 @@
   font-size: 12px;
   font-weight: 400;
   color: #333;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
   li {
     margin: 0;
     padding: 7px 16px;

--
Gitblit v1.9.3