Skip to content

A
ant-design-pro-vue
Commit 03de3b72 by Sendya
Options

feat: merge multi-tab

parent 5f1d8a83
Showing with 159 additions and 80 deletions
src/components/MultiTab/MultiTab.vue 0 → 100644
<template>
<div style="margin: -23px -24px 24px -24px">
<a-tabs
hideAdd
v-model="activeKey"
type="editable-card"
:tabBarStyle="{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }"
@edit="onEdit"
>
<a-tab-pane v-for="page in pages" :style="{ height: 0 }" :tab="page.meta.title" :key="page.fullPath" :closable="pages.length > 1">
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
export default {
name: 'MultiTab',
data () {
return {
fullPathList: [],
pages: [],
activeKey: '',
newTabIndex: 0
}
},
created () {
this.pages.push(this.$route)
this.fullPathList.push(this.$route.fullPath)
},
methods: {
onEdit (targetKey, action) {
this[action](targetKey)
},
remove (targetKey) {
if (this.pages.length === 1) {
return
}
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
},
},
watch: {
'$route': function (newVal) {
this.activeKey = newVal.fullPath
if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
this.fullPathList.push(newVal.fullPath)
this.pages.push(newVal)
}
},
activeKey: function (newPathKey) {
this.$router.push({ path: newPathKey })
}
}
}
</script>
\ No newline at end of file
src/components/MultiTab/index.js 0 → 100644
import MultiTab from './MultiTab'
export default MultiTab
\ No newline at end of file
src/components/layouts/BasicLayout.vue
<template>
<global-layout>
<transition name="page-transition">
<route-view />
</transition>
</global-layout>
</template>
<script>
import RouteView from '@/components/layouts/RouteView'
import GlobalLayout from '@/components/page/GlobalLayout'
export default {
name: 'BasicLayout',
components: {
RouteView,
GlobalLayout
},
data () {
return {}
}
}
</script>
<style lang="less">
/*
* The following styles are auto-applied to elements with
* transition="page-transition" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the page transition by editing
* these styles.
*/
.page-transition-enter {
opacity: 0;
}
.page-transition-leave-active {
opacity: 0;
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<template>
<global-layout>
<multi-tab v-if="$store.getters.multiTab"></multi-tab>
<transition name="page-transition">
<route-view />
</transition>
</global-layout>
</template>
<script>
import RouteView from '@/components/layouts/RouteView'
import MultiTab from '@/components/MultiTab'
import GlobalLayout from '@/components/page/GlobalLayout'
export default {
name: 'BasicLayout',
components: {
RouteView,
MultiTab,
GlobalLayout
},
data () {
return {}
}
}
</script>
<style lang="less">
/*
* The following styles are auto-applied to elements with
* transition="page-transition" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the page transition by editing
* these styles.
*/
.page-transition-enter {
opacity: 0;
}
.page-transition-leave-active {
opacity: 0;
}
.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
src/config/defaultSettings.js
......@@ -22,6 +22,7 @@ export default {
fixSiderbar: false, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multiTab: false,
// vue-ls options
storageOptions: {
namespace: 'pro__', // key prefix
......
src/core/bootstrap.js
import Vue from 'vue'
import store from '@/store/'
import {
ACCESS_TOKEN,
DEFAULT_COLOR,
DEFAULT_THEME,
DEFAULT_LAYOUT_MODE,
DEFAULT_COLOR_WEAK,
SIDEBAR_TYPE,
DEFAULT_FIXED_HEADER,
DEFAULT_FIXED_HEADER_HIDDEN,
DEFAULT_FIXED_SIDEMENU,
DEFAULT_CONTENT_WIDTH_TYPE
} from '@/store/mutation-types'
import config from '@/config/defaultSettings'
export default function Initializer () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
// last step
import Vue from 'vue'
import store from '@/store/'
import {
ACCESS_TOKEN,
DEFAULT_COLOR,
DEFAULT_THEME,
DEFAULT_LAYOUT_MODE,
DEFAULT_COLOR_WEAK,
SIDEBAR_TYPE,
DEFAULT_FIXED_HEADER,
DEFAULT_FIXED_HEADER_HIDDEN,
DEFAULT_FIXED_SIDEMENU,
DEFAULT_CONTENT_WIDTH_TYPE,
DEFAULT_MULTI_TAB
} from '@/store/mutation-types'
import config from '@/config/defaultSettings'
export default function Initializer () {
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
store.commit('TOGGLE_MULTI_TAB', Vue.ls.get(DEFAULT_MULTI_TAB, config.multiTab))
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
// last step
}
src/store/getters.js
......@@ -8,7 +8,8 @@ const getters = {
welcome: state => state.user.welcome,
roles: state => state.user.roles,
userInfo: state => state.user.info,
addRouters: state => state.permission.addRouters
addRouters: state => state.permission.addRouters,
multiTab: state => state.app.multiTab
}
export default getters
src/store/modules/app.js
......@@ -8,7 +8,8 @@ import {
DEFAULT_FIXED_HEADER,
DEFAULT_FIXED_SIDEMENU,
DEFAULT_FIXED_HEADER_HIDDEN,
DEFAULT_CONTENT_WIDTH_TYPE
DEFAULT_CONTENT_WIDTH_TYPE,
DEFAULT_MULTI_TAB
} from '@/store/mutation-types'
const app = {
......@@ -22,7 +23,8 @@ const app = {
fixSiderbar: false,
autoHideHeader: false,
color: null,
weak: false
weak: false,
multiTab: true
},
mutations: {
SET_SIDEBAR_TYPE: (state, type) => {
......@@ -70,6 +72,10 @@ const app = {
TOGGLE_WEAK: (state, flag) => {
Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
state.weak = flag
},
TOGGLE_MULTI_TAB: (state, bool) => {
Vue.ls.set(DEFAULT_MULTI_TAB, bool)
state.multiTab = bool
}
},
actions: {
......@@ -108,6 +114,9 @@ const app = {
},
ToggleWeak ({ commit }, weakFlag) {
commit('TOGGLE_WEAK', weakFlag)
},
ToggleMultiTab ({ commit }, bool) {
commit('TOGGLE_MULTI_TAB', bool)
}
}
}
......
src/store/mutation-types.js
......@@ -8,6 +8,7 @@ export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
export const CONTENT_WIDTH_TYPE = {
Fluid: 'Fluid',
......
src/utils/mixin.js
......@@ -17,7 +17,8 @@ const mixin = {
fixSidebar: state => state.app.fixSiderbar,
contentWidth: state => state.app.contentWidth,
autoHideHeader: state => state.app.autoHideHeader,
sidebarOpened: state => state.app.sidebar
sidebarOpened: state => state.app.sidebar,
multiTab: state => state.app.multiTab
})
},
methods: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment