fix(tab): 修复多标签页拖拽排序后首页 tab 变为可关闭的状态,并使用更合理的方法控制首页标签不可关闭
#fix 273
This commit is contained in:
parent
a7553c8fd8
commit
606e14380d
|
|
@ -255,9 +255,6 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
padding: 0px 20px;
|
padding: 0px 20px;
|
||||||
}
|
}
|
||||||
.el-icon-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-tabs__item.is-active {
|
.el-tabs__item.is-active {
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,36 @@
|
||||||
<div class="d2-multiple-page-control-group" flex>
|
<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" flex-box="1">
|
||||||
<div class="d2-multiple-page-control-content-inner">
|
<div class="d2-multiple-page-control-content-inner">
|
||||||
<d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
|
<d2-contextmenu
|
||||||
<d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
|
:visible.sync="contextmenuFlag"
|
||||||
|
:x="contentmenuX"
|
||||||
|
:y="contentmenuY">
|
||||||
|
<d2-contextmenu-list
|
||||||
|
:menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
|
||||||
|
@rowClick="contextmenuClick"/>
|
||||||
</d2-contextmenu>
|
</d2-contextmenu>
|
||||||
<el-tabs
|
<el-tabs
|
||||||
class="d2-multiple-page-control d2-multiple-page-sort"
|
class="d2-multiple-page-control d2-multiple-page-sort"
|
||||||
:value="current"
|
:value="current"
|
||||||
type="card"
|
type="card"
|
||||||
:closable="true"
|
|
||||||
@tab-click="handleClick"
|
@tab-click="handleClick"
|
||||||
@edit="handleTabsEdit"
|
@tab-remove="handleTabRemove"
|
||||||
@contextmenu.native="handleContextmenu">
|
@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>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d2-multiple-page-control-btn" flex-box="0">
|
<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"/>
|
<d2-icon name="times-circle"/>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item command="left">
|
<el-dropdown-item command="left">
|
||||||
|
|
@ -46,6 +59,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapActions } from 'vuex'
|
import { mapState, mapActions } from 'vuex'
|
||||||
import Sortable from 'sortablejs'
|
import Sortable from 'sortablejs'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
D2Contextmenu: () => import('../contextmenu'),
|
D2Contextmenu: () => import('../contextmenu'),
|
||||||
|
|
@ -83,12 +97,20 @@ export default {
|
||||||
'closeAll',
|
'closeAll',
|
||||||
'openedSort'
|
'openedSort'
|
||||||
]),
|
]),
|
||||||
|
/**
|
||||||
|
* @description 计算某个标签页是否可关闭
|
||||||
|
* @param {Object} page 其中一个标签页
|
||||||
|
*/
|
||||||
|
isTabClosable (page) {
|
||||||
|
return page.name !== 'index'
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* @description 右键菜单功能点击
|
* @description 右键菜单功能点击
|
||||||
|
* @param {Object} event 事件
|
||||||
*/
|
*/
|
||||||
handleContextmenu (event) {
|
handleContextmenu (event) {
|
||||||
let target = event.target
|
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
|
let flag = false
|
||||||
if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
||||||
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
||||||
|
|
@ -105,59 +127,45 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 右键菜单的row-click事件
|
* @description 右键菜单的 row-click 事件
|
||||||
|
* @param {String} command 事件类型
|
||||||
*/
|
*/
|
||||||
contextmenuClick (command) {
|
contextmenuClick (command) {
|
||||||
this.handleControlItemClick(command, this.tagName)
|
this.handleControlItemClick(command, this.tagName)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 接收点击关闭控制上选项的事件
|
* @description 接收点击关闭控制上选项的事件
|
||||||
|
* @param {String} command 事件类型
|
||||||
|
* @param {String} tagName tab 名称
|
||||||
*/
|
*/
|
||||||
handleControlItemClick (command, tagName = null) {
|
handleControlItemClick (command, tagName = null) {
|
||||||
if (tagName) {
|
if (tagName) this.contextmenuFlag = false
|
||||||
this.contextmenuFlag = false
|
const params = { pageSelect: tagName }
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
pageSelect: tagName
|
|
||||||
}
|
|
||||||
switch (command) {
|
switch (command) {
|
||||||
case 'left':
|
case 'left': this.closeLeft(params); break
|
||||||
this.closeLeft(params)
|
case 'right': this.closeRight(params); break
|
||||||
break
|
case 'other': this.closeOther(params); break
|
||||||
case 'right':
|
case 'all': this.closeAll(); break
|
||||||
this.closeRight(params)
|
default: this.$message.error('无效的操作'); break
|
||||||
break
|
|
||||||
case 'other':
|
|
||||||
this.closeOther(params)
|
|
||||||
break
|
|
||||||
case 'all':
|
|
||||||
this.closeAll()
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
this.$message.error('无效的操作')
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 接收点击 tab 标签的事件
|
* @description 接收点击 tab 标签的事件
|
||||||
|
* @param {object} tab 标签
|
||||||
|
* @param {object} event 事件
|
||||||
*/
|
*/
|
||||||
handleClick (tab, event) {
|
handleClick (tab, event) {
|
||||||
// 找到点击的页面在 tag 列表里是哪个
|
// 找到点击的页面在 tag 列表里是哪个
|
||||||
const page = this.opened.find(page => page.fullPath === tab.name)
|
const page = this.opened.find(page => page.fullPath === tab.name)
|
||||||
const { name, params, query } = page
|
const { name, params, query } = page
|
||||||
if (page) {
|
if (page) this.$router.push({ name, params, query })
|
||||||
this.$router.push({ name, params, query })
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
* @description 点击 tab 上的删除按钮触发这里
|
||||||
|
* @param {String} tagName tab 名称
|
||||||
*/
|
*/
|
||||||
handleTabsEdit (tagName, action) {
|
handleTabRemove (tagName) {
|
||||||
if (action === 'remove') {
|
this.close({ tagName })
|
||||||
this.close({
|
|
||||||
tagName
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue