vue中实现tag标签

ゞ浴缸里的玫瑰 2021-07-26 02:29 1011阅读 0赞

# 1，安装scss插件 #

cnpm i node-sass sass-loader -S

## 2，安装element-ui ##

cnpm i element-ui -S

main.js中引入element-ui

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)

## 3，项目结构 ##

![20191111012212730.png][]

App.vue

<template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    *{
      margin: 0;
      padding: 0;
    }
    </style>

main.js

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

router文件夹下的index.js

![2019111101241618.png][]

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'home',
        redirect:'/index',
        component: Home,
        meta:{title:'首页'},
        children:[
          {
            path:'/index',
            name:'index',
            component:()=>import('@/views/index.vue'),
            meta:{
              title:'系统首页',
              hideclose:true
            }
          },
          {
            path:'/test/test1',
            name:'test1',
            component:()=>import('@/views/test/test1.vue'),
            meta:{
              title:'test1'
            }
          },
          {
            path:'/test/test2',
            name:'test2',
            component:()=>import('@/views/test/test2.vue'),
            meta:{
              title:'test2'
            }
          }
        ]
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

common文件夹目录

![20191111012453798.png][]

bus.js

import Vue from 'vue';
    // 使用 Event Bus
    const bus = new Vue();
    export default bus;

header.vue

<template>
    <div class="header">
      <div class="left">
        <ul>
          <li  class="collapse-btn"  @click="collapseChange">
            <i class="el-icon-menu"></i>
          </li>
        </ul>
      </div>
    
      </div>
      
    </template>
    <script>
      import bus from './bus'
      export default{
        data(){
          return{
            isCollapse:false,
          }
        },
        methods:{
          collapseChange(){
            this.isCollapse=!this.isCollapse
            bus.$emit('collapse',this.isCollapse)
      }}}
    </script>
    
    <style lang='scss'>
    
    .header {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      // font-size: 22px;
      color: #fff;
      background-color: #11c26d;
      height: 60px;
          .left{
             .collapse-btn {
                       width: 45px;
             }
        }
          ul {
        list-style: none;
        li {
          float: left;
          line-height: 60px;
          height: 60px;
          text-align: center;
          padding: 0 10px;
          cursor: pointer;
        }
        i {
          line-height: 60px;
        }
        li:hover {
          background-color: #337ecc;
          
        }
      }
    }
    </style>

aside.vue

<template>
      <div class="sidebar">
        <el-menu
          :collapse="isCollapse"
          :default-active="$route.path"
          class="el-menu-vertical-demo menu"
          active-text-color="#10B9D3"
          unique-opened
          router
        >
          <el-menu-item index="/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
         <template v-for="(menu_one,i) in menuData" >
            <el-submenu :key="i" :index="menu_one.path">
              <template slot="title">
                <i :class="menu_one.icon"></i>
                <span>{
       {menu_one.title}}</span>
              </template>
              <el-menu-item
                v-for="(menu_two,i) in menu_one.subs"
                :key="i"
                :index="menu_two.path"
              >
                <i :class="menu_two.icon"></i>
                <span>{
       {menu_two.title}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
       </el-menu>
      </div>
    </template>
    <script>
    import bus from './bus';
    export default {
      data() {
        return {
          isCollapse: false,
          menuData: [
            {
              icon: "el-icon-map-location",
              title: "Test",
              path: "p_mapManger",
              subs: [
                {
                  path: "/test/test1",
                  title: "test1",
                  icon: "el-icon-crop"
                },
                {
                  path: "/test/test2",
                  title: "test2",
                  icon: "el-icon-crop"
                }
              ]
            }
          ]
        };
      },
      created() {
        bus.$on('collapse', msg => {
          this.isCollapse = msg;
        });
       }
    }
    </script>
    <style lang='scss'>
    .sidebar {
      display: flex;
      flex-flow: column nowrap;
      height: 100vh;
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 300px;
      }
      .menu{
        height: 100%;
      }
    }
    </style>

tag.vue

<template>
      <div class="_tag">
        <el-scrollbar style="margin-right: 6px;">
          <div class="left">
            <el-tag
              v-for="tag in tagsList"
              :key="tag.title"
              :closable="!tag.hideclose"
              :type="isActive(tag)"
              @close="handleCloseTag(tag)"
            >
              <router-link :to="tag.path" class="tag-title">{
       { tag.title }}</router-link>
            </el-tag>
          </div>
        </el-scrollbar>
    
        <el-dropdown @command="handleCloseBtn" class="_dropdown">
          <el-button type="primary" size="small">
            标签选项
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
            <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </template>
    <style lang="scss">
    ._tag {
      // border: 1px solid green;
      flex: 0 0 40px;
      display: flex;
      align-items: center;
      background-color: white;
      border-bottom: 1px solid #e6e6e6;
      justify-content: space-between;
      .left {
        display: flex;
        height: 40px;
        align-items: center;
        .el-tag {
          margin-left: 6px;
          .tag-title {
            color: black;
            padding: 8px 2px;
            text-decoration: none;
          }
        }
      }
      ._dropdown {
        height: 40px;
        display: flex;
        align-items: center;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.1) -3px 0px 15px 3px;
        padding: 0 5px;
      }
    }
    </style>
    
    <script>
    export default {
      data() {
        return {
          tagsList: []
        };
      },
      mounted() {
        this.setTags(this.$route);
        // console.log("this.$route:", this.$route);
      },
      methods: {
        //设置标签
        setTags(route) {
          const isExsit = this.tagsList.some(item => {
            return item.path === route.fullPath;
          });
          if (isExsit == false) {
            this.tagsList.push({
              title: route.meta.title, //标签名
              name: route.name, //路由里的name对应vue页的name,标签列表里的name可以做vue页面缓存
              path: route.fullPath, //路由
              hideclose: route.meta.hideclose ? route.meta.hideclose : false //是否隐藏关闭
            });
          }
        },
        //关闭标签
        handleCloseTag(tag) {
          this.tagsList.splice(this.tagsList.indexOf(tag), 1);
          // array.splice(index,howmany) 从索引为index处删除howmany个元素
          if (this.tagsList.length > 0) {
            this.$router.push(this.tagsList[this.tagsList.length - 1].path);
          } else {
            // this.$router.push("/index");
            this.$router.push({ name: "sadmasMain" });
          }
        },
        //关闭功能按钮
        handleCloseBtn(command) {
          if (command == "closeOther") {
            //关闭其它,保留没有删除的标签。find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
            var activeTag = this.tagsList.find(item => {
              return item.path == this.$route.fullPath;
            }); //查找第一个满足的
            var noCloseTags = this.getNoCloseTabs();
            if (
              noCloseTags.some(item => {
                return item.path == activeTag.path && item.title == activeTag.title;
              }) == false
            ) {
              //不包含
              noCloseTags = noCloseTags.concat(activeTag);
            }
            this.tagsList = noCloseTags;
          } else if (command == "closeAll") {
            //关闭所有,保留没有删除的标签
            this.tagsList = this.getNoCloseTabs();
            this.$router.push(this.tagsList[this.tagsList.length - 1].path);
          }
        },
        getNoCloseTabs() {
          //获取没有删除的标签
          var noCloseList = this.tagsList.filter(item => {
            return item.hideclose == true;
          });
          return noCloseList;
        },
        //是否选中
        isActive(tag) {
          if (tag.path == this.$route.fullPath) {
            return "";
          } else {
            return "info";
          }
        }
      },
      watch: {
        //路由变化,设置标签
        $route(newValue, oldValue) {
          this.setTags(newValue);
        }
      }
    };
    </script>

footer.vue

<template>
      <el-footer class="_footer">
        <span class="text">footer@2019</span>
      </el-footer>
    </template>
    <style lang="scss">
    ._footer {
      display: flex;
      justify-content: center;
      align-items: center;
      border-top:1px solid #e6e6e6;
      .text {
        color: #606266;
      }
    }
    </style>

test文件夹目录

![2019111101274461.png][]

test1.vue

<template>
        <div class="test1">这是test1.vue</div>
    </template>
    <style lang="scss">
    .test1 {
      display: flex;
      flex: auto;
    }
    </style>

test2.vue

<template>
        <div class="test2">这是test2.vue</div>
    </template>
    <style lang="scss">
    .test2 {
      display: flex;
      flex: auto;
    }
    </style>

index.vue

Home.vue

<template>
    
      <div class="homeContainer">
         <vAside></vAside>
         <div class="headContainer">
            <vHeader></vHeader>
               <div class="tagContainer">
                   <vTag></vTag>
                   <div class="mainContainer">
                      <div class="main">
                         <router-view></router-view>
                      </div>
                      <vFooter class="footer"></vFooter>
                   </div>
                </div>
          </div>
      </div>
      
    </template>
    <script>
    import vHeader from '@/views/common/header';
    import vAside from '@/views/common/aside';
    import vTag from '@/views/common/tag';
    import vFooter from '@/views/common/footer';
    
    export default {
      data() {
        return {
             isCollapse: false
        };
      },
      components: { vHeader, vAside,vTag,vFooter}
    };
    </script>
    <style lang='scss'>
    .homeContainer{
      // border: 1px solid red;
            box-sizing: border-box;
    
      height: 100vh;
      display: flex;
      flex-flow: row nowrap;
        .headContainer{
            // border: 1px solid red;
            box-sizing: border-box;
    
          display: flex;
          flex-flow: column nowrap;
          flex: auto;
          .tagContainer{
            //  border: 1px solid blue;
             display: flex;
             flex-flow: column nowrap;
             flex: auto;
    
              .mainContainer{
                // border: 1px solid blue;
                background-color: #f0f0f0; //灰色背景
    
                box-sizing: border-box;
                display: flex;
                flex-flow: column nowrap;
                flex: auto;
                
                overflow: auto;
                height: calc(100vh - 100px);
    
                .main{
                  // border:1px solid green;
                  padding: 10px;
    
                  display: flex;
                    flex: auto;
                // overflow: auto;
    
                }
                .footer{
                // border: 1px solid orange;
    
                  flex: 0 0 60px;
                }
    
              }
          }
    
      }
      
    }
    
    </style>

## 运行效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[20191111012212730.png]: /images/20210725/176a57e670914700974e604005107f0f.png
[2019111101241618.png]: /images/20210725/4bb8fe6b0546403793d0e62460436e03.png
[20191111012453798.png]: /images/20210725/00bd3478f2fc4c98af7f9ed730f94a27.png
[2019111101274461.png]: /images/20210725/0db110a2cfd34991995d184dc8024d05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/93742dc744984785adcfde9abcfcc3ea.png