diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index b0a55c6..0a47da2 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -6,6 +6,7 @@
{{ tag.title }}
-
+ closeSelectedTag(e,tag)" class="tag-icon">
@@ -62,12 +63,12 @@
let obj = new WeakMap()
let affixTags = ref([])
- const tags = ref([])
+ const tags = ref(new Map())
// 多个ref 添加tag
const setTagRef = (el)=>{
if(el){
if(!obj.get(el)){
- tags.value.push(el)
+ tags.value.set(el.dataset['id'],el)
}
obj.set(el,el)
}
@@ -138,10 +139,14 @@
}
}
- const closeSelectedTag = (view)=>{
+ const closeSelectedTag = (event,view)=>{
+ if(tags.value.get(view.path)){
+ tags.value.delete(view.path)
+ }
store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
if (isActive(view)) {
toLastView(visitedViews, view)
+
}
})
}
@@ -153,7 +158,7 @@
})
}
- function handleScrollAction(currentTag,tagLists) {
+ function handleScrollAction(currentTag) {
const scrollContainerRect = scrollContainer.value.getBoundingClientRect()
let { left:currx, width:currentWidth } = currentTag.getBoundingClientRect()
const clientX = currx + currentWidth / 2;
@@ -169,17 +174,17 @@
function moveToCurrentTag(){
nextTick(() => {
- for (const tag of tags.value) {
- let path = tag.attributes.path.value
- if (path === route.path) {
- let fullPath = tag.attributes.fullPath.value
- // 移动
- handleScrollAction(tag,tags.value)
- if (fullPath !== route.fullPath) {
- store.dispatch('tagsView/updateVisitedView', route)
+ for (const [key, tag] of tags.value) {
+ let path = tag.attributes.path.value
+ if (path === route.path) {
+ let fullPath = tag.attributes.fullPath.value
+ // 移动
+ handleScrollAction(tag,tags.value)
+ if (fullPath !== route.fullPath) {
+ store.dispatch('tagsView/updateVisitedView', route)
+ }
+ break
}
- break
- }
}
})
}
@@ -200,7 +205,7 @@
nextTick(()=>{
setTimeout(()=>{
moveToCurrentTag()
- },50)
+ },100)
})
})
@@ -251,7 +256,7 @@
position: relative;
display: inline-flex;
align-items: center;
- padding: 6px 10px;
+ padding: 6px 10px;
font-size: 14px;
cursor: pointer;
margin-right: 10px;
@@ -269,12 +274,9 @@
border-color: #42b983;
//color: #42b983;
}
-
.tags-scroll-inner{
display: flex;
-
flex-wrap: nowrap;
-
}
.tag-icon{
margin-left: 6px;
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index e080b42..b0892e6 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -52,13 +52,13 @@ const componentsRouter = {
{
path: 'input',
component: () => import('@/views/components-demo/input.vue'),
- name: 'input',
+ name: 'components-input',
meta: { title: '输入框', roles:['other']}
},
{
- path: 'inputnumber',
+ path: 'components-inputnumber',
component: () => import('@/views/components-demo/inputnumber.vue'),
- name: 'inputnumber',
+ name: 'components-inputnumber',
meta: { title: '数字输入框', roles:['other']}
},
{