Vue折疊面板組件的封裝

更新時間：2022年04月07日 14:37:07 作者：陽光的男夾克

這篇文章主要為大家詳細介紹了Vue折疊面板組件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue折疊面板組件的封裝代碼，供大家參考，具體內(nèi)容如下

該組件使用了 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: {
? ? // 導(dǎo)航條折疊
? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: