Skip to content

Commit

Permalink
fix(tab): 修复多标签页拖拽排序后首页 tab 变为可关闭的状态,并使用更合理的方法控制首页标签不可关闭
Browse files Browse the repository at this point in the history
#fix 273
  • Loading branch information
FairyEver committed Apr 21, 2020
1 parent a7553c8 commit 606e143
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 42 deletions.
3 changes: 0 additions & 3 deletions src/assets/style/theme/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -255,9 +255,6 @@
&:hover {
padding: 0px 20px;
}
.el-icon-close {
display: none;
}
}
}
.el-tabs__item.is-active {
Expand Down
86 changes: 47 additions & 39 deletions src/layout/header-aside/components/tabs/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,36 @@
<div class="d2-multiple-page-control-group" flex>
<div class="d2-multiple-page-control-content" flex-box="1">
<div class="d2-multiple-page-control-content-inner">
<d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
<d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
<d2-contextmenu
:visible.sync="contextmenuFlag"
:x="contentmenuX"
:y="contentmenuY">
<d2-contextmenu-list
:menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
@rowClick="contextmenuClick"/>
</d2-contextmenu>
<el-tabs
class="d2-multiple-page-control d2-multiple-page-sort"
:value="current"
type="card"
:closable="true"
@tab-click="handleClick"
@edit="handleTabsEdit"
@tab-remove="handleTabRemove"
@contextmenu.native="handleContextmenu">
<el-tab-pane v-for="page in opened" :key="page.fullPath" :label="page.meta.title || '未命名'" :name="page.fullPath"/>
<el-tab-pane
v-for="page in opened"
:key="page.fullPath"
:label="page.meta.title || '未命名'"
:name="page.fullPath"
:closable="isTabClosable(page)"/>
</el-tabs>
</div>
</div>
<div class="d2-multiple-page-control-btn" flex-box="0">
<el-dropdown size="default" split-button @click="closeAll" @command="command => handleControlItemClick(command)">
<el-dropdown
size="default"
split-button
@click="closeAll"
@command="command => handleControlItemClick(command)">
<d2-icon name="times-circle"/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="left">
Expand Down Expand Up @@ -46,6 +59,7 @@
<script>
import { mapState, mapActions } from 'vuex'
import Sortable from 'sortablejs'
export default {
components: {
D2Contextmenu: () => import('../contextmenu'),
Expand Down Expand Up @@ -83,12 +97,20 @@ export default {
'closeAll',
'openedSort'
]),
/**
* @description 计算某个标签页是否可关闭
* @param {Object} page 其中一个标签页
*/
isTabClosable (page) {
return page.name !== 'index'
},
/**
* @description 右键菜单功能点击
* @param {Object} event 事件
*/
handleContextmenu (event) {
let target = event.target
// 解决 https://github.com/d2-projects/d2-admin/issues/54
// fix https://github.com/d2-projects/d2-admin/issues/54
let flag = false
if (target.className.indexOf('el-tabs__item') > -1) flag = true
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
Expand All @@ -105,59 +127,45 @@ export default {
}
},
/**
* @description 右键菜单的row-click事件
* @description 右键菜单的 row-click 事件
* @param {String} command 事件类型
*/
contextmenuClick (command) {
this.handleControlItemClick(command, this.tagName)
},
/**
* @description 接收点击关闭控制上选项的事件
* @param {String} command 事件类型
* @param {String} tagName tab 名称
*/
handleControlItemClick (command, tagName = null) {
if (tagName) {
this.contextmenuFlag = false
}
const params = {
pageSelect: tagName
}
if (tagName) this.contextmenuFlag = false
const params = { pageSelect: tagName }
switch (command) {
case 'left':
this.closeLeft(params)
break
case 'right':
this.closeRight(params)
break
case 'other':
this.closeOther(params)
break
case 'all':
this.closeAll()
break
default:
this.$message.error('无效的操作')
break
case 'left': this.closeLeft(params); break
case 'right': this.closeRight(params); break
case 'other': this.closeOther(params); break
case 'all': this.closeAll(); break
default: this.$message.error('无效的操作'); break
}
},
/**
* @description 接收点击 tab 标签的事件
* @param {object} tab 标签
* @param {object} event 事件
*/
handleClick (tab, event) {
// 找到点击的页面在 tag 列表里是哪个
const page = this.opened.find(page => page.fullPath === tab.name)
const { name, params, query } = page
if (page) {
this.$router.push({ name, params, query })
}
if (page) this.$router.push({ name, params, query })
},
/**
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
* @description 点击 tab 上的删除按钮触发这里
* @param {String} tagName tab 名称
*/
handleTabsEdit (tagName, action) {
if (action === 'remove') {
this.close({
tagName
})
}
handleTabRemove (tagName) {
this.close({ tagName })
}
},
mounted () {
Expand Down

0 comments on commit 606e143

Please sign in to comment.