Vue 封装一个折叠面板组件

女爷i 2022-08-28 14:51 467阅读 0赞

该组件使用了 Element 的一些 icon 图标，以及 过渡动画 el-collapse-transition，需安装 element  
![在这里插入图片描述][1d8c0291eb9f45008cff8f9c50c7335e.png]  
具体使用方法，主要知识点 provide ，inject，this.$children 和 \_uid （vue中无论递归组件，还是自定义组件，每个组件都有唯一的\_uid）

<navigation-bar v-model="barName" accordion>
      <navigation-bar-item label="测试1" name="1" line>测试1</navigation-bar-item>
      <navigation-bar-item label="测试2" name="2" line>测试2</navigation-bar-item>
      <navigation-bar-item label="测试3" name="3">测试3</navigation-bar-item>
    </navigation-bar>

navigation-bar 组件代码如下

<template>
      <div>
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default { 
      name: "navigationBar",
      provide () { 
        return { 
          Bar: this
        }
      },
      props: { 
        value: { 
          type: String,
          default: ''
        },
        accordion: { 
          type: Boolean,
          default: false
        }
      },
      methods: { 
        changeState (id) { 
          this.$children.forEach(item => { 
            if (item._uid !== id) { 
              item.isShow = false
            } else { 
              item.isShow = !item.isShow
            }
          })
        }
      },
    }
    </script>
    
    <style scoped>
    
    </style>

navigation-bar-item 组件代码如下，el-image 的图片地址使用的本地图片，请更换自己的路径

<template>
      <div :class="line && !isShow ? 'content' : ''">
        <div class="navigationBar" @click="foldClick">
          <div class="navigationBarLeft"></div>
          <div class="navigationBarRight">
            <span>{ { label}}</span>
            <div class="navigationBarIcon">
              <el-image style="width: 18px; height: 18px" :src="require('../assets/img/doubt.png')" ></el-image>
              <i :class="isShow ? 'rotate' : 'rotate1'" ref="foldIcon" style="margin-left: 10px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="isShow">
            <slot></slot>
          </div>
        </el-collapse-transition>
      </div>
    </template>
    
    <script>
    export default { 
      name: "navigationBarItem",
      inject: ['Bar'],
      props:{ 
        label:{ 
          type: String,
          required: true
        },
        name:{ 
          type: String,
          default: ''
        },
        line: { 
          type: Boolean,
          default: false
        }
      },
      data() { 
        return { 
          isShow: false
        }
      },
      mounted() { 
        // 默认展开
        this.Bar.value === this.name ? this.isShow = true : ''
      },
      methods: { 
        // 导航条折叠
        foldClick() { 
          if (this.Bar.accordion) { 
            this.Bar.changeState(this._uid)
          } else { 
            this.isShow = !this.isShow;
          }
        }
      }
    }
    </script>
    
    <style scoped>
      .navigationBar { 
        display: flex;
      }
      .navigationBar:hover { 
        cursor: pointer;
      }
      .navigationBarLeft { 
        width: 6px;
        height: 25px;
        background-color: #3179F4;
      }
      .navigationBarRight { 
        flex: 1;
        display: flex;
        height: 25px;
        background-color: #F2F2F2;
        justify-content: space-between;
        padding: 0 10px;
        align-items: center;
        font-size: 14px;
      }
      .navigationBarIcon { 
        display: flex;
        align-items: center;
      }
      .rotate { 
        transform: rotate(180deg);
        transition: transform .3s;
      }
      .rotate1 { 
        transform: rotate(0deg);
        transition: transform .3s;
      }
    
      .content { 
        border-bottom: 1px solid #DCDFE6;
      }
    </style>

[1d8c0291eb9f45008cff8f9c50c7335e.png]: /images/20220828/96aecde2e46a48bea506328c87c5ce2b.png