新增模块：flex.css 【快速布局】
新增选项卡右键菜单 Former-commit-id: bbb22c61d92d8aa0a4f9860ce000dc53e26ba23c
This commit is contained in:
Lu Chaohai
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-contentmenu-list"
|
||||
@click="rowClick">
|
||||
<div
|
||||
v-for="item in menulist"
|
||||
:key="item.value"
|
||||
:data-value="item.value"
|
||||
class="d2-contentmenu-item"
|
||||
flex="cross:center main:center">
|
||||
<d2-icon
|
||||
v-if="item.icon"
|
||||
:name="item.icon"/>
|
||||
<div
|
||||
class="d2-contentmenu-item-title"
|
||||
flex-box="1">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-contextmenu-list',
|
||||
props: {
|
||||
menulist: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClick (event) {
|
||||
let target = event.target
|
||||
while (!target.dataset.value) {
|
||||
target = target.parentNode
|
||||
}
|
||||
this.$emit('rowClick', target.dataset.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.d2-contentmenu-list {
|
||||
.d2-contentmenu-item {
|
||||
padding: 8px 20px 8px 15px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
color: #66b1ff;
|
||||
}
|
||||
.d2-contentmenu-item-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-contextmenu"
|
||||
v-show="flag"
|
||||
:style="style">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-contextmenu',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
flag: {
|
||||
get () {
|
||||
if (this.visible) {
|
||||
// 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
|
||||
window.addEventListener('mousedown', this.watchContextmenu)
|
||||
}
|
||||
return this.visible
|
||||
},
|
||||
set (newVal) {
|
||||
this.$emit('update:visible', newVal)
|
||||
}
|
||||
},
|
||||
style () {
|
||||
return {
|
||||
left: this.x + 'px',
|
||||
top: this.y + 'px',
|
||||
display: this.visible ? 'block' : 'none '
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
watchContextmenu (event) {
|
||||
if (!this.$el.contains(event.target)) this.flag = false
|
||||
window.removeEventListener('mousedown', this.watchContextmenu)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 将菜单放置到body下
|
||||
document.querySelector('body').appendChild(this.$el)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.d2-contextmenu {
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
z-index: 2018;
|
||||
background: #FFF;
|
||||
border: 1px solid #cfd7e5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,35 @@
|
||||
<template>
|
||||
<div class="d2-multiple-page-control-group">
|
||||
<div class="d2-multiple-page-control-content">
|
||||
<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>
|
||||
<el-tabs
|
||||
class="d2-multiple-page-control"
|
||||
:value="pageCurrent"
|
||||
type="card"
|
||||
:closable="true"
|
||||
@tab-click="handleClick"
|
||||
@edit="handleTabsEdit">
|
||||
@edit="handleTabsEdit"
|
||||
@contextmenu.native="handleContextmenu">
|
||||
<el-tab-pane
|
||||
class="hello"
|
||||
v-for="(page, index) in pageOpenedList"
|
||||
:key="index"
|
||||
:label="page.meta.title || '未命名'"
|
||||
:name="page.name">
|
||||
</el-tab-pane>
|
||||
:name="page.name"/>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2-multiple-page-control-btn">
|
||||
<div
|
||||
class="d2-multiple-page-control-btn"
|
||||
flex-box="0">
|
||||
<el-dropdown
|
||||
split-button
|
||||
@click="handleControlBtnClick"
|
||||
@@ -50,6 +61,27 @@
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
D2Contextmenu: () => import('../contextmenu'),
|
||||
D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
contextmenuFlag: false,
|
||||
contentmenuX: 0,
|
||||
contentmenuY: 0,
|
||||
contextmenuListIndex: [
|
||||
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
|
||||
],
|
||||
contextmenuList: [
|
||||
{ icon: 'arrow-left', title: '关闭左侧', value: 'left' },
|
||||
{ icon: 'arrow-right', title: '关闭右侧', value: 'right' },
|
||||
{ icon: 'times', title: '关闭其它', value: 'other' },
|
||||
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
|
||||
],
|
||||
tagName: 'index'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageOpenedList: state => state.d2admin.pageOpenedList,
|
||||
@@ -63,19 +95,46 @@ export default {
|
||||
'd2adminTagCloseOther',
|
||||
'd2adminTagCloseAll'
|
||||
]),
|
||||
/**
|
||||
* @description 右键菜单功能点击
|
||||
*/
|
||||
handleContextmenu (event) {
|
||||
let target = event.target
|
||||
if (target.className.indexOf('el-tabs__item') > -1 || target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
this.contentmenuX = event.clientX
|
||||
this.contentmenuY = event.clientY
|
||||
this.tagName = target.getAttribute('aria-controls').slice(5)
|
||||
this.contextmenuFlag = true
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 右键菜单的row-click事件
|
||||
*/
|
||||
contextmenuClick (command) {
|
||||
this.handleControlItemClick(command, this.tagName)
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上选项的事件
|
||||
*/
|
||||
handleControlItemClick (command) {
|
||||
handleControlItemClick (command, tagName = null) {
|
||||
if (tagName) {
|
||||
this.contextmenuFlag = false
|
||||
}
|
||||
const params = {
|
||||
pageSelect: tagName,
|
||||
vm: this
|
||||
}
|
||||
switch (command) {
|
||||
case 'left':
|
||||
this.d2adminTagCloseLeft()
|
||||
this.d2adminTagCloseLeft(params)
|
||||
break
|
||||
case 'right':
|
||||
this.d2adminTagCloseRight()
|
||||
this.d2adminTagCloseRight(params)
|
||||
break
|
||||
case 'other':
|
||||
this.d2adminTagCloseOther()
|
||||
this.d2adminTagCloseOther(params)
|
||||
break
|
||||
case 'all':
|
||||
this.d2adminTagCloseAll(this)
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<!-- 半透明遮罩 -->
|
||||
<div class="d2-layout-header-aside-mask"></div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="d2-layout-header-aside-content">
|
||||
<div class="d2-layout-header-aside-content" flex="dir:top">
|
||||
<!-- 顶栏 -->
|
||||
<div class="d2-theme-header">
|
||||
<div class="logo-group" :style="{width: isMenuAsideCollapse ? asideWidthCollapse : asideWidth}">
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下面 主体 -->
|
||||
<div class="d2-theme-container">
|
||||
<div class="d2-theme-container" flex-box="1" flex>
|
||||
<!-- 主体 侧边栏 -->
|
||||
<div
|
||||
ref="aside"
|
||||
@@ -35,11 +35,11 @@
|
||||
<d2-menu-side/>
|
||||
</div>
|
||||
<!-- 主体 -->
|
||||
<div class="d2-theme-container-main">
|
||||
<div class="d2-theme-container-main-header">
|
||||
<div class="d2-theme-container-main" flex-box="1" flex="dir:top">
|
||||
<div class="d2-theme-container-main-header" flex-box="0">
|
||||
<d2-tabs/>
|
||||
</div>
|
||||
<div class="d2-theme-container-main-body">
|
||||
<div class="d2-theme-container-main-body" flex-box="1">
|
||||
<transition name="fade-transverse">
|
||||
<keep-alive :include="d2adminKeepAliveInclude">
|
||||
<router-view/>
|
||||
|
||||
Reference in New Issue
Block a user