简单实用折叠面板可以折叠收起展开内容区域

前端简单实用折叠面板可以折叠收起展开内容区域, 阅读全文下载完整代码请关注微信公众号： 前端组件开发

效果图如下:

 

 

代码如下: 

# 简单实用折叠面板可以折叠收起展开内容区域。

#### 使用方法

```使用方法

<!-- lefttext:做标题  rigtext: 有注明文字 isopen:展开折叠状态 isicon:是否展示箭头图片 默认true -->

<ccfoldview lefttext="历年营业收入" rigtext="(2023年度)" @click.native="foldclick(1)" :isopen="isfoldone"></ccfoldview>

```

#### html代码部分

```html

<template>

<view class="content">

<!-- lefttext:做标题  rigtext: 有注明文字 isopen:展开折叠状态 isicon:是否展示箭头图片 默认true -->

<ccfoldview lefttext="历年营业收入" rigtext="(2023年度)" @click.native="foldclick(1)" :isopen="isfoldone">

</ccfoldview>

<!--  图片视图 -->

<div class="chartv" v-if="isfoldone" id="chartv_one">

</div>

<ccfoldview lefttext="历年净利润" rigtext="(2023年度)" @click.native="foldclick(2)" :isopen="isfoldtwo">

</ccfoldview>

<!--  图片视图 -->

<div class="chartv" v-if="isfoldtwo" id="chartv_two">

</div>

<ccfoldview lefttext="历年资产" rigtext="(2023年度)" @click.native="foldclick(3)" :isopen="isfoldthree">

</ccfoldview>

<!--  图片视图 -->

<div class="chartv" v-if="isfoldthree" id="chartv_three">

</div>

<ccfoldview lefttext="历年负债" rigtext="(2023年度)" @click.native="foldclick(4)" :isopen="isfoldfour">

</ccfoldview>

<!--  图片视图 -->

<div class="chartv" v-if="isfoldfour" id="chartv_four">

</div>

</view>

</template>

```

#### js代码 （引入组件 填充数据）

```javascript

<script>

import ccfoldview from "../../components/ccfoldview.vue"

export default {

components: {

ccfoldview

},

data() {

return {

isfoldone: false,

isfoldtwo: false,

isfoldthree: false,

isfoldfour: false,

}

},

methods: {

foldclick(tag) {

if (tag == 1) {

this.isfoldone = !this.isfoldone;

} else if (tag == 2) {

this.isfoldtwo = !this.isfoldtwo;

}

else if (tag == 3) {

this.isfoldthree = !this.isfoldthree;

}

else if (tag == 4) {

this.isfoldfour = !this.isfoldfour;

}

}

},

}

</script>

```

#### css

<style>

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.chartv {

display: flex;

margin-left: 0px;

width: calc((100vw - 24px));

height: 260px;

}

</style>

```