material.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <a-card
  3. style="width:100%"
  4. :tab-list="tabListNoTitle"
  5. :active-tab-key="currentTabComponent"
  6. @tabChange="key => onTabChange(key)"
  7. >
  8. <component v-bind:is="currentTabComponent"></component>
  9. </a-card>
  10. </template>
  11. <script>
  12. import moment from 'moment';
  13. export default {
  14. components:{
  15. directional: () => import('../directional/directional'),
  16. person: () => import('@/views/modules/crowd-control/crowd-control.vue'),
  17. url: () => import('../url/url'),
  18. application: () => import('../application/application'),
  19. },
  20. data() {
  21. return {
  22. currentTabComponent:'directional',//当前加载的组件名称
  23. tabListNoTitle: [
  24. {
  25. key: 'directional',
  26. tab: '定向包管理',
  27. },
  28. {
  29. key: 'person',
  30. tab: '人群包管理',
  31. },
  32. {
  33. key: 'url',
  34. tab: '落地页管理',
  35. },
  36. {
  37. key: 'application',
  38. tab: '应用包管理',
  39. },
  40. ],
  41. }
  42. },
  43. methods: {
  44. onTabChange(key, type) {
  45. this.currentTabComponent = key;
  46. },
  47. },
  48. created() {
  49. this.currentTabComponent = 'directional';
  50. }
  51. }
  52. </script>