恢复添加标签导航右侧关闭下拉菜单，同时还支持在标签上右键关闭

iview · Oct 9, 2018 · 30d7d6a · 30d7d6a
1 parent 131d5f8
commit 30d7d6a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/main/components/tags-nav/tags-nav.less b/src/components/main/components/tags-nav/tags-nav.less
@@ -42,14 +42,14 @@
       left: 0px;
     }
     &.right-btn{
-      right: 0px;
+      right: 32px;
       border-right: 1px solid #F0F0F0;
     }
   }
   .scroll-outer{
     position: absolute;
     left: 28px;
-    right: 28px;
+    right: 61px;
     top: 0;
     bottom: 0;
     box-shadow: 0px 0 3px 2px rgba(100,100,100,.1) inset;

diff --git a/src/components/main/components/tags-nav/tags-nav.vue b/src/components/main/components/tags-nav/tags-nav.vue
@@ -1,5 +1,16 @@
 <template>
   <div class="tags-nav">
+    <div class="close-con">
+      <Dropdown transfer @on-click="handleTagsOption" style="margin-top:7px;">
+        <Button size="small" type="text">
+          <Icon :size="18" type="ios-close-circle-outline" />
+        </Button>
+        <DropdownMenu slot="list">
+          <DropdownItem name="close-all">关闭所有</DropdownItem>
+          <DropdownItem name="close-others">关闭其他</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
     <ul v-show="visible" :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}" class="contextmenu">
       <li v-for="(item, key) of menuList" @click="handleTagsOption(key)" :key="key">{{item}}</li>
     </ul>
@@ -95,11 +106,11 @@ export default {
       }
     },
     handleTagsOption (type) {
-      if (type === 'all') {
+      if (type.includes('all')) {
         // 关闭所有，除了home
         let res = this.list.filter(item => item.name === 'home')
         this.$emit('on-close', res, 'all')
-      } else if (type === 'others') {
+      } else if (type.includes('others')) {
         // 关闭除当前页和home页的其他页
         let res = this.list.filter(item => routeEqual(this.currentRouteObj, item) || item.name === 'home')
         this.$emit('on-close', res, 'others', this.currentRouteObj)