隨著技術的發(fā)展，開發(fā)的復雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應用，經常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。
組件化對于任何一個業(yè)務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結合業(yè)務特性的模塊拆分策略、模塊間的交互方式和構建系統(tǒng)等等 。
本文給大家介紹的一款組件是：
前端vue簡單實用折疊面板可以折疊收起展開內容區(qū)域
?文章來源地址http://www.zghlxwxcb.cn/news/detail-737309.html
效果圖如下:
?文章來源：http://www.zghlxwxcb.cn/news/detail-737309.html
代碼如下:?
# 簡單實用折疊面板可以折疊收起展開內容區(qū)域。
#### 使用方法
```使用方法
<!-- leftText:做標題? rigText: 有注明文字 isOpen:展開折疊狀態(tài) isIcon:是否展示箭頭圖片 默認true -->
<CCFoldView leftText="歷年營業(yè)收入" rigText="(2023年度)" @click.native="foldClick(1)" :isOpen="isFoldOne"></CCFoldView>
```
#### HTML代碼部分
```html
<template>
<view class="content">
<!-- leftText:做標題? rigText: 有注明文字 isOpen:展開折疊狀態(tài) isIcon:是否展示箭頭圖片 默認true -->
<CCFoldView leftText="歷年營業(yè)收入" 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;
background-color: aliceblue;
}
</style>
```
閱讀全文下載完整組件代碼請關注微信公眾號： 前端組件開發(fā)
?
?
?
到了這里，關于前端vue簡單實用折疊面板可以折疊收起展開內容區(qū)域的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
