1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <template>
- <div>
- <div>
- <v-tabs v-model="tab">
- <v-tab v-for="item in items" :key="item.path" @click="handleTo(item.path)">{{ item.title }}</v-tab>
- </v-tabs>
- </div>
- <div class="white" style="font-size: 16px;">
- <v-tabs-items v-model="tab">
- <v-tab-item v-for="item in items" :key="item.path">
- <component :is="item.path"></component>
- </v-tab-item>
- </v-tabs-items>
- </div>
- </div>
- </template>
- <script>
- import { loadDynamicComponents } from '@/utils'
- const vueComponent = require.context('./dynamic', true, /\.vue$/)
- const autoComponent = loadDynamicComponents(vueComponent)
- export default {
- name: 'auto-collection',
- components: { ...autoComponent },
- data () {
- return {
- tab: 0,
- items: []
- }
- },
- created () {
- this.items = this.$route.meta.roles.filter(item => +item.active)
- .sort((a, b) => a.sort - b.sort)
- .map(e => ({ title: e.label, path: e.name }))
- const savedTab = this.$route.query.tab
- if (!savedTab) {
- this.tab = 0
- return
- }
- this.tab = this.items.findIndex(e => e.path === savedTab)
- },
- methods: {
- handleTo (path) {
- this.$router.push(`${this.$route.path}?tab=${path}`)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|