Vue折叠面板组件的封装

Glory ·

更新时间:2024-11-13

· 1602 次阅读

本文实例为大家分享了Vue折叠面板组件的封装代码，供大家参考，具体内容如下

该组件使用了 Element 的一些 icon 图标，以及过渡动画 el-collapse-transition，需安装 element

具体使用方法，主要知识点 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>

VUE 面板封装

1024 个赞