Vue 캡슐화 된 빵 부스러기 (예 : 스틱 및 사용)

효과 표시 (일반적으로 백그라운드 관리 시스템에서 사용)

여기에 사진 설명 삽입
그림에 표시된 효과도 필요하면 다음 코드를 직접 붙여 넣으십시오
. 부모 구성 요소가 매개 변수를 전달하지 않고도 사용하기가 매우 쉽습니다.

기본 아이디어 : 라우팅 정보
수신 , 현재 배열에 정보 추가, 현재 활성 스타일 의 배열을 반복 하지만 결정 경로 의 현재 따라$route

$route

코드는 매우 명확합니다.

꼬리표

<template>
  <div class="tag" v-if="showTags">
    <ul>
      <li class="tags-li" v-for="(item,index) in list" :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="handleTags">
      <el-dropdown @command="handleTags" size="mini" type="primary">
        <el-button type="primary">
          标签选项<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>


  </div>
</template>

<script>
    export default {
    
    
        name: "Tag",
        data() {
    
    
            return {
    
    
                list: []
            }
        },
        computed: {
    
    
            // 显示隐藏面包屑
            showTags() {
    
    
                return this.list.length > 0;
            }
        },
        watch: {
    
    
            // 通过 监听路由的变化
            $route(newValue, oldValue) {
    
    
                this.setTages(newValue)
            }
        },
        methods: {
    
    
            // 选中状态  返回 true false
            isActive(path) {
    
    
                return path === this.$route.fullPath;
            },
            // 标签选项 关闭单个 关闭所有
            handleTags(command) {
    
    
                command === 'all' ? this.closeAll() : this.closeOther()
            },
            // 点击关闭  单个 按钮
            closeTags(index) {
    
    
                const delItem = this.list.splice(index, 1)[0]; // 获取当前的
                const item = this.list[index] ? this.list[index] : this.list[index - 1]; // 获取到下一个
                if (item) {
    
     // 有下一个  跳到下一个
                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                } else {
    
      // 没有 去 home页面
                    this.$router.push('/Home');
                }
            },
            // 点击关闭 所有
            closeAll() {
    
    
                this.list = [];
                this.$router.push('/Home');
            },
            // 点击关闭其他
            closeOther() {
    
    
                let currentList = this.list.filter((ele) => {
    
    
                    return ele.path === this.$route.fullPath
                });
                this.list = currentList
            },
            // 展示的数组
            setTages(newValue) {
    
    
                const isExist = this.list.some(item => {
    
    
                    return item.path === newValue.fullPath;
                });

                if (!isExist) {
    
    
                    if (this.list.length >= 8) {
    
    
                        this.list.shift();
                    }
                    this.list.push({
    
    
                        title: newValue.meta.title,
                        path: newValue.path,
                        name: newValue.matched[1].components.default.name
                    })
                }

            }
        }
    }
</script>

<style scoped lang="scss">
  .handleTags > > > .el-button {
    
    
    padding: 7px 0;
    font-size: 12px;
  }

  .tag {
    
    
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .tags {
    
    
    position: relative;
    height: 30px;
    overflow: hidden;
    background: #fff;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
  }


  .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: skyblue;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
  }

  .tags-li:not(.active):hover {
    
    
    background: #f8f8f8;
  }

  .tags-li.active {
    
    
    color: #fff;
  }

  .tags-li-title {
    
    
    float: left;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
  }

  .tags-li.active .tags-li-title {
    
    
    color: #fff;
  }

  .tags-close-box {
    
    
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
    z-index: 10;
  }

</style>

사용할 상위 구성 요소의 구성을 소개합니다.

추천

출처blog.csdn.net/weixin_46034375/article/details/108603556