Tabs.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="tabs">
  3. <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
  4. <el-tab-pane
  5. :key="item.name"
  6. v-for="(item, index) in editableTabs"
  7. :label="item.title"
  8. :name="item.name"
  9. >
  10. </el-tab-pane>
  11. </el-tabs>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. editableTabsValue: '',
  19. editableTabs: [],
  20. }
  21. },
  22. methods: {
  23. handleTabsEdit(targetName, action) {
  24. if (action === 'add') {
  25. if (this.editableTabs.length > 2) {
  26. this.editableTabs.forEach(item => {
  27. // console.log(item.name)
  28. // if (path.indexOf(item.name) == -1) {
  29. // }
  30. })
  31. } else {
  32. this.editableTabs.push({
  33. title: targetName.title,
  34. name: targetName.url,
  35. });
  36. this.editableTabsValue = targetName.url;
  37. }
  38. }
  39. if (action === 'remove') {
  40. let tabs = this.editableTabs;
  41. let activeName = this.editableTabsValue;
  42. tabs.forEach((tab, index) => {
  43. if (tab.name === targetName) {
  44. let nextTab = tabs[index + 1] || tabs[index - 1];
  45. if (nextTab) {
  46. activeName = nextTab.name;
  47. }
  48. }
  49. });
  50. this.editableTabsValue = activeName;
  51. this.editableTabs = tabs.filter(tab => tab.name !== targetName);
  52. }
  53. }
  54. },
  55. watch: {
  56. $route(to, from) {
  57. const router = this.$router.options.routes;
  58. const path = this.$route.path;
  59. console.log(path)
  60. this.editableTabsValue = path;
  61. router.forEach(element => {
  62. if(element.children) {
  63. element.children.forEach(item => {
  64. console.log(item.meta)
  65. if (path.indexOf(item.meta.url) !== -1) {
  66. console.log(item.meta)
  67. this.handleTabsEdit(item.meta, 'add')
  68. }
  69. })
  70. }
  71. });
  72. }
  73. },
  74. mounted: function () {
  75. const router = this.$router.options.routes;
  76. const path = this.$route.path;
  77. console.log(path)
  78. this.editableTabsValue = path;
  79. router.forEach(element => {
  80. if(element.children) {
  81. element.children.forEach(item => {
  82. console.log(item.meta)
  83. if (path.indexOf(item.meta.url) !== -1) {
  84. console.log(item.meta)
  85. this.handleTabsEdit(item.meta, 'add')
  86. }
  87. })
  88. }
  89. });
  90. }
  91. }
  92. </script>
  93. <style lang="scss">
  94. .tabs {
  95. white-space: nowrap;
  96. overflow: hidden;
  97. width: 100%;
  98. height: 40px;
  99. border-bottom: 1px solid #ccc;
  100. padding: 4px 0;
  101. box-sizing: border-box;
  102. .el-tabs--card {
  103. margin: 0;
  104. .el-tabs__header {
  105. border: none;
  106. margin: 0;
  107. .el-tabs__item {
  108. border: 1px solid #ccc;
  109. margin: 0 5px;
  110. height: 32px;
  111. line-height: 32px;
  112. }
  113. .el-tabs__nav {
  114. border: none;
  115. }
  116. }
  117. }
  118. .el-tabs__item.is-active {
  119. background-color: #42b983;
  120. color: #fff;
  121. border-color: #42b983;
  122. }
  123. }
  124. </style>