index.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div>
  3. <div>
  4. <v-tabs v-model="tab">
  5. <v-tab v-for="item in items" :key="item.path" @click="handleTo(item.path)">{{ item.title }}</v-tab>
  6. </v-tabs>
  7. </div>
  8. <div class="white" style="font-size: 16px;">
  9. <v-tabs-items v-model="tab">
  10. <v-tab-item v-for="item in items" :key="item.path">
  11. <component :is="item.path"></component>
  12. </v-tab-item>
  13. </v-tabs-items>
  14. </div>
  15. </div>
  16. </template>
  17. <script>
  18. import { loadDynamicComponents } from '@/utils'
  19. const vueComponent = require.context('./dynamic', true, /\.vue$/)
  20. const autoComponent = loadDynamicComponents(vueComponent)
  21. export default {
  22. name: 'auto-collection',
  23. components: { ...autoComponent },
  24. data () {
  25. return {
  26. tab: 0,
  27. items: []
  28. }
  29. },
  30. created () {
  31. this.items = this.$route.meta.roles.filter(item => +item.active)
  32. .sort((a, b) => a.sort - b.sort)
  33. .map(e => ({ title: e.label, path: e.name }))
  34. const savedTab = this.$route.query.tab
  35. if (!savedTab) {
  36. this.tab = 0
  37. return
  38. }
  39. this.tab = this.items.findIndex(e => e.path === savedTab)
  40. },
  41. methods: {
  42. handleTo (path) {
  43. this.$router.push(`${this.$route.path}?tab=${path}`)
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="scss" scoped>
  49. </style>