<!-- 折疊組件 -->
<navigation-bar v-model="barName" accordion>
? <navigation-bar-item label="測(cè)試1" name="1" line>測(cè)試1</navigation-bar-item>
? <navigation-bar-item label="測(cè)試2" name="2" line>測(cè)試2</navigation-bar-item>
? <navigation-bar-item label="測(cè)試3" name="3">測(cè)試3</navigation-bar-item>
</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>

<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() {
? ? // 默認(rèn)展開(kāi)
? ? 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>