update tagsPageOpened

iview · Oct 20, 2017 · 0ad9165 · 0ad9165
1 parent b18e520
commit 0ad9165
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 17 deletions.
diff --git a/src/main.js b/src/main.js
@@ -119,6 +119,29 @@ const store = new Vuex.Store({
             state.pageOpenedList.splice(1, 0, openedPage);
             localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
         },
+        clearAllTags (state) {
+            state.pageOpenedList.splice(1);
+            router.push({
+                name: 'home_index'
+            });
+            localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
+        },
+        clearOtherTags (state, vm) {
+            let currentName = vm.$route.name;
+            let currentIndex = 0;
+            state.pageOpenedList.forEach((item, index) => {
+                if (item.name === currentName) {
+                    currentIndex = index;
+                }
+            });
+            if (currentIndex === 0) {
+                state.pageOpenedList.splice(1);
+            } else {
+                state.pageOpenedList.splice(currentIndex + 1);
+                state.pageOpenedList.splice(1, currentIndex - 1);
+            }
+            localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
+        },
         setOpenedList (state) {
             state.pageOpenedList = localStorage.pageOpenedList ? JSON.parse(localStorage.pageOpenedList) : [otherRouter.children[0]];
         },

diff --git a/src/views/main.less b/src/views/main.less
@@ -42,17 +42,40 @@
     }
     .tags-con{
         height: 40px;
-        padding: 2px 10px;
         z-index: -1;
-        overflow: hidden;
+        overflow: visible;
         background: #f0f0f0;
+        .tags-outer-scroll-con{
+            position: relative;
+            width: 100%;
+            height: 100%;
+            .tags-inner-scroll-body{
+                position: absolute;
+                padding: 2px 10px;
+                overflow: visible;
+                white-space: nowrap;
+            }
+            .close-all-tag-con{
+                position: absolute;
+                right: 0;
+                top: 0;
+                box-sizing: border-box;
+                padding-top: 8px;
+                text-align: center;
+                width: 110px;
+                height: 100%;
+                background: white;
+                box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
+                z-index: 10;
+            }
+        }
     }
     &-header{
         height: 60px;
         background: #fff;
         box-shadow: 0 2px 1px 1px rgba(100,100,100,.1);
         position: relative;
-        z-index: 10;
+        z-index: 11;
         .navicon-con{
             margin: 6px;
             display: inline-block;

diff --git a/src/views/main_components/tagsPageOpened.vue b/src/views/main_components/tagsPageOpened.vue
@@ -3,19 +3,33 @@
 </style>
 
 <template>
-    <div>
-        <transition-group name="taglist-moving-animation">
-            <Tag 
-                type="dot"
-                v-for="item in pageTagsList" 
-                :key="item.name" 
-                :name="item.name" 
-                @on-close="closePage"
-                @click.native="linkTo(item)"
-                :closable="item.name==='home_index'?false:true"
-                :color="item.children?(item.children[0].name===currentPageName?'blue':'default'):(item.name===currentPageName?'blue':'default')"
-            >{{ item.title }}</Tag>
-        </transition-group>
+    <div ref="scrollCon" @mousewheel="handlescroll" @mouseout="handlemouseout" class="tags-outer-scroll-con">
+        <div class="close-all-tag-con">
+            <Dropdown @on-click="handleTagsOption">
+                <Button size="small" type="primary">
+                    标签选项
+                    <Icon type="arrow-down-b"></Icon>
+                </Button>
+                <DropdownMenu slot="list">
+                    <DropdownItem name="clearAll">关闭所有</DropdownItem>
+                    <DropdownItem name="clearOthers">关闭其他</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
+        <div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagConLeft + 'px'}">
+            <transition-group name="taglist-moving-animation">
+                <Tag 
+                    type="dot"
+                    v-for="item in pageTagsList" 
+                    :key="item.name" 
+                    :name="item.name" 
+                    @on-close="closePage"
+                    @click.native="linkTo(item)"
+                    :closable="item.name==='home_index'?false:true"
+                    :color="item.children?(item.children[0].name===currentPageName?'blue':'default'):(item.name===currentPageName?'blue':'default')"
+                >{{ item.title }}</Tag>
+            </transition-group>
+        </div>
     </div>
 </template>
 
@@ -24,7 +38,8 @@ export default {
     name: 'tagsPageOpened',
     data () {
         return {
-            currentPageName: this.$route.name
+            currentPageName: this.$route.name,
+            tagConLeft: 0
         };
     },
     props: {
@@ -62,6 +77,28 @@ export default {
                     name: item.name
                 });
             }
+        },
+        handlescroll (e) {
+            document.body.style.overflow = 'hidden';
+            let left = 0;
+            if (e.wheelDelta > 0) {
+                left = Math.min(0, this.tagConLeft + e.wheelDelta);
+            } else {
+                if (this.$refs.scrollCon.offsetWidth < this.$refs.scrollBody.offsetWidth) {
+                    left = Math.max(this.tagConLeft + e.wheelDelta, this.$refs.scrollCon.offsetWidth - this.$refs.scrollBody.offsetWidth);
+                }
+            }
+            this.tagConLeft = left;
+        },
+        handlemouseout () {
+            document.body.style.overflow = 'auto';
+        },
+        handleTagsOption (type) {
+            if (type === 'clearAll') {
+                this.$store.commit('clearAllTags');
+            } else {
+                this.$store.commit('clearOtherTags', this);
+            }
         }
     },
     watch: {