• 后台系统依据路由生成tabs标签页


    // tagsView.vue
    <template>
      <div class="tags" v-if="showTags">
        <ul>
          <li
            class="tags-li"
            v-for="(item,index) in tabsList"
            :class="{'active': isActive(item.path)}"
            :key="index"
          >
            <router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link>
            <span class="tags-li-icon" @click="closeTags(index)">
              <i class="el-icon-close"></i>
            </span>
          </li>
        </ul>
        <!-- 其他操作按钮 -->
        <div class="tags-close-box">
          <el-dropdown @command="handleTabs">
            <el-button size="mini">
              <i class="el-icon-arrow-down el-icon--right">操作</i>
            </el-button>
            <el-dropdown-menu size="small" slot="dropdown">
              <el-dropdown-item command="other">关闭其他</el-dropdown-item>
              <el-dropdown-item command="all">关闭所有</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          tabsList: []
        };
      },
      computed: {
        showTags() {
          return this.tabsList.length > 0;
        }
      },
      watch: {
        // 对router进行监听,每当访问router时,对tags的进行修改
        $route(newValue) {
          this.setTags(newValue);
        }
      },
      created() {
        // 第一次进入页面时,修改tag的值
        this.setTags(this.$route);
      },
      methods: {
        isActive(path) {
          return path === this.$route.fullPath;
        },
        // 关闭单个标签
        closeTags(index) {
          const delItem = this.tabsList.splice(index, 1)[0];
          const item = this.tabsList[index]
            ? this.tabsList[index]
            : this.tabsList[index - 1];
          if (item) {
            delItem.path === this.$route.fullPath && this.$router.push(item.path);
          } else {
            this.$router.push("/");
          }
        },
        // 关闭全部标签
        closeAll() {
          this.tabsList = [];
          this.$router.push("/");
        },
        // 关闭其他标签
        closeOther() {
          const curItem = this.tabsList.filter(item => {
            return item.path === this.$route.fullPath;
          });
          this.tabsList = curItem;
        },
        // 设置标签
        setTags(route) {
          const isExist = this.tabsList.some(item => {
            return item.path === route.fullPath;
          });
          !isExist &&
            this.tabsList.push({
              title: route.meta.title,
              path: route.fullPath,
              name: route.matched[1].components.default.name
            });
        },
        // 当关闭所有页面时隐藏
        handleTabs(command) {
          command === "other" ? this.closeOther() : this.closeAll();
        }
      }
    };
    </script>
    
    
    <style>
    .tags {
      position: relative;
      height: 30px;
      overflow: hidden;
      background: #fff;
      padding-right: 120px;
    }
    
    .tags ul {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
    
    .tags-li {
      float: left;
      margin: 3px 5px 2px 3px;
      border-radius: 3px;
      font-size: 12px;
      overflow: hidden;
      cursor: pointer;
      height: 23px;
      line-height: 23px;
      border: 1px solid #e9eaec;
      background: #fff;
      padding: 0 5px 0 12px;
      vertical-align: middle;
      color: #666;
      -webkit-transition: all 0.3s ease-in;
      -moz-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in;
    }
    
    .tags-li:not(.active):hover {
      background: #f8f8f8;
    }
    
    .tags-li-title {
      float: left;
      max-width: 80px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-right: 5px;
      color: #666;
    }
    
    .tags-li.active {
      color: #fff;
      border: 1px solid #10b9d3;
      background-color: #10b9d3;
    }
    
    .tags-li.active .tags-li-title {
      color: #fff;
    }
    
    .tags-close-box {
      position: fixed;
      right: 36px;
      top: 76px;
      background: #333;
      box-sizing: border-box;
      padding-top: 1px;
      text-align: center;
      z-index: 10;
    }
    </style>
  • 相关阅读:
    ZROI2018提高day9t1
    p2114 起床困难综合症
    EZOJ #78
    Linux JDK配置
    jps命令
    虚拟机 网卡模式配置
    redhat下yum命令安装(替换为centos yum命令)
    URL编码
    Query DSL(2)----Full text queries
    Query DSL(1)
  • 原文地址:https://www.cnblogs.com/lhl66/p/12581299.html
Copyright © 2020-2023  润新知