vue+antd實現折疊與展開組件
最近在寫前臺頁面,遇到一個需求,如下:點擊頭部標題,如果有內容,則展開,否則不展開,其實就是展開與折疊的組件。效果圖如下:
由於其它地方也需要實現這種功能,所以,需要封裝成一個組件。
代碼如下:
1. 父頁面代碼
1.1 變量:open:表示現在的狀態,true是展開,false為折疊
1.2 變量:height:表示折疊時的高度,也就是根據標題的高度來的。
1.3 插槽:在組件中寫的內容是一個插槽,可以預知組件內有個<slot></slot>來接收外部的內容
<openCloseBox :open="true" :height="40"> <div class="card_tit"> <a-icon type="minus" /><span class="tab_tit">常規工藝</span> </div> <div class="card_con"> <a-row> <a-col :span="12">產品類型:常規</a-col> <a-col :span="12">板子大小:常規</a-col> <a-col :span="12">出貨方式:常規</a-col> <a-col :span="12">交貨數量:11</a-col> </a-row> </div> </openCloseBox>
1.4 組件引入
import openCloseBox from './modules/openCloseBox.vue'; export default { name: 'index', components: { openCloseBox, }, }
2. 組件代碼
<template> <div class="openclose-box" :class="{ 'openclose-card-open': isOpen && card, 'openclose-card-close': !isOpen && card, 'openclose-box-open': isOpen && !card, 'openclose-box-close': !isOpen && !card, }" :style="{ height: !isOpen && !card ? height + 'px' : 'auto' }" > <div class="openclose-btn" :class="{ 'openclose-btn-box': !card }" @click="isOpen = !isOpen" ></div> <a-card v-if="card"> <slot></slot> </a-card> <slot v-else></slot> </div> </template> <script> export default { name: 'OpenCloseBox', props: { open: { type: Boolean, default: false, }, card: { type: Boolean, default: false, }, height: { type: Number, default: 60, }, }, data() { return { isOpen: this.open, }; }, }; </script> <style lang="less" scoped> .openclose-box { position: relative; /deep/ .ant-card-body { padding: 20px 18px; } .openclose-btn { font-size: 14px; line-height: 16px; color: #333; width: 100%; height: 56px; position: absolute; top: 0; right: 0; padding-right: 18px; display: flex; justify-content: flex-end; align-items: center; z-index: 1; user-select: none; cursor: pointer; .openclose-icon { color: #999; } &:hover { color: #f90; .openclose-icon { color: #f90; } } } .openclose-btn-box { height: 48px; } } .openclose-card-open { /deep/ .ant-card-body { height: auto; } } .openclose-card-close { /deep/ .ant-card-body { height: 56px; overflow: hidden; } } .openclose-box-open { height: auto; } .openclose-box-close { height: 60px; overflow: hidden; } </style>
完成!!
其它地方引用的效果如下:
展開效果:
折疊效果:
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 淺談VUE uni-app 自定義組件
- Vue+tsx使用slot沒有被替換的問題
- Python用HBuilder創建交流社區APP
- Vue開發高德地圖應用的最佳實踐
- Web Components實現類Element UI中的Card卡片