| | |
| | | * ] |
| | | **/ |
| | | import Menu from 'ant-design-vue/es/menu' |
| | | import Icon from 'ant-design-vue/es/icon/' |
| | | import Icon from 'ant-design-vue/es/icon' |
| | | |
| | | const {Item, SubMenu} = Menu |
| | | |
| | |
| | | </a-list-item> |
| | | <a-list-item> |
| | | 多页签模式 |
| | | <a-switch :checked="multipage" slot="actions" size="small" @change="setMultipage" /> |
| | | <a-switch :checked="multiPage" slot="actions" size="small" @change="setMultiPage" /> |
| | | </a-list-item> |
| | | </a-list> |
| | | </setting-item> |
| | |
| | | name: 'Setting', |
| | | components: {ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, SettingItem}, |
| | | computed: { |
| | | multipage () { |
| | | return this.$store.state.setting.multipage |
| | | multiPage () { |
| | | return this.$store.state.setting.multiPage |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | clipboard.destroy() |
| | | }) |
| | | }, |
| | | setMultipage (checked) { |
| | | this.$store.commit('setting/setMultipage', checked) |
| | | setMultiPage (checked) { |
| | | this.$store.commit('setting/setMultiPage', checked) |
| | | } |
| | | } |
| | | } |
| | |
| | | <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" /> |
| | | <a-tabs |
| | | @contextmenu.native="e => onContextmenu(e)" |
| | | v-if="multipage" |
| | | v-if="multiPage" |
| | | :active-key="activePage" |
| | | style="margin-top: -8px; margin-bottom: 8px" |
| | | :hide-add="true" |
| | |
| | | </a-tab-pane> |
| | | </a-tabs> |
| | | <transition name="page-toggle"> |
| | | <keep-alive v-if="multipage"> |
| | | <keep-alive v-if="multiPage"> |
| | | <router-view /> |
| | | </keep-alive> |
| | | <router-view v-else /> |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | multipage () { |
| | | return this.$store.state.setting.multipage |
| | | multiPage () { |
| | | return this.$store.state.setting.multiPage |
| | | } |
| | | }, |
| | | created () { |
| | |
| | | watch: { |
| | | '$route': function (newRoute) { |
| | | this.activePage = newRoute.fullPath |
| | | if (!this.multipage) { |
| | | if (!this.multiPage) { |
| | | this.linkList = [newRoute.fullPath] |
| | | this.pageList = [newRoute] |
| | | } else if (this.linkList.indexOf(newRoute.fullPath) < 0) { |
| | |
| | | 'activePage': function (key) { |
| | | this.$router.push(key) |
| | | }, |
| | | 'multipage': function (newVal) { |
| | | 'multiPage': function (newVal) { |
| | | if (!newVal) { |
| | | this.linkList = [this.$route.fullPath] |
| | | this.pageList = [this.$route] |
| | |
| | | <img :src="extraImage"/> |
| | | </div> |
| | | <transition name="page-toggle"> |
| | | <keep-alive v-if="multipage"> |
| | | <keep-alive v-if="multiPage"> |
| | | <router-view ref="page" /> |
| | | </keep-alive> |
| | | <router-view ref="page" v-else /> |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | multipage () { |
| | | return this.$store.state.setting.multipage |
| | | multiPage () { |
| | | return this.$store.state.setting.multiPage |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | <template> |
| | | <transition name="page-toggle"> |
| | | <keep-alive v-if="multipage"> |
| | | <keep-alive v-if="multiPage"> |
| | | <router-view /> |
| | | </keep-alive> |
| | | <router-view v-else /> |
| | |
| | | export default { |
| | | name: 'RouteView', |
| | | computed: { |
| | | multipage () { |
| | | return this.$store.state.setting.multipage |
| | | multiPage () { |
| | | return this.$store.state.setting.multiPage |
| | | } |
| | | } |
| | | } |
| | |
| | | {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'}, |
| | | {link: 'https://ant.design', name: 'Ant Design'} |
| | | ], |
| | | multipage: true |
| | | multiPage: true |
| | | }, |
| | | mutations: { |
| | | setDevice (state, isMobile) { |
| | |
| | | setLayout (state, layout) { |
| | | state.layout = layout |
| | | }, |
| | | setMultipage (state, multipage) { |
| | | state.multipage = multipage |
| | | setMultiPage (state, multiPage) { |
| | | state.multiPage = multiPage |
| | | } |
| | | } |
| | | } |