123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <template>
- <div class="tabs">
- <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
- <el-tab-pane
- :key="item.name"
- v-for="(item, index) in editableTabs"
- :label="item.title"
- :name="item.name"
- >
- </el-tab-pane>
- </el-tabs>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- editableTabsValue: '',
- editableTabs: [],
- }
- },
- methods: {
- handleTabsEdit(targetName, action) {
- if (action === 'add') {
- if (this.editableTabs.length > 2) {
- this.editableTabs.forEach(item => {
- // console.log(item.name)
- // if (path.indexOf(item.name) == -1) {
- // }
- })
- } else {
- this.editableTabs.push({
- title: targetName.title,
- name: targetName.url,
- });
- this.editableTabsValue = targetName.url;
- }
- }
- if (action === 'remove') {
- let tabs = this.editableTabs;
- let activeName = this.editableTabsValue;
- tabs.forEach((tab, index) => {
- if (tab.name === targetName) {
- let nextTab = tabs[index + 1] || tabs[index - 1];
- if (nextTab) {
- activeName = nextTab.name;
- }
- }
- });
- this.editableTabsValue = activeName;
- this.editableTabs = tabs.filter(tab => tab.name !== targetName);
- }
- }
- },
- watch: {
- $route(to, from) {
- const router = this.$router.options.routes;
- const path = this.$route.path;
- console.log(path)
- this.editableTabsValue = path;
- router.forEach(element => {
- if(element.children) {
- element.children.forEach(item => {
- console.log(item.meta)
- if (path.indexOf(item.meta.url) !== -1) {
- console.log(item.meta)
- this.handleTabsEdit(item.meta, 'add')
- }
- })
- }
- });
- }
- },
- mounted: function () {
- const router = this.$router.options.routes;
- const path = this.$route.path;
- console.log(path)
- this.editableTabsValue = path;
- router.forEach(element => {
- if(element.children) {
- element.children.forEach(item => {
- console.log(item.meta)
- if (path.indexOf(item.meta.url) !== -1) {
- console.log(item.meta)
- this.handleTabsEdit(item.meta, 'add')
- }
- })
- }
- });
- }
- }
- </script>
- <style lang="scss">
- .tabs {
- white-space: nowrap;
- overflow: hidden;
- width: 100%;
- height: 40px;
- border-bottom: 1px solid #ccc;
- padding: 4px 0;
- box-sizing: border-box;
- .el-tabs--card {
- margin: 0;
- .el-tabs__header {
- border: none;
- margin: 0;
- .el-tabs__item {
- border: 1px solid #ccc;
- margin: 0 5px;
- height: 32px;
- line-height: 32px;
- }
- .el-tabs__nav {
- border: none;
- }
- }
- }
- .el-tabs__item.is-active {
- background-color: #42b983;
- color: #fff;
- border-color: #42b983;
- }
- }
- </style>
|