目錄

#平臺差異說明

#基本使用

#控制面板的初始狀態(tài)，以及是否可以操作

#自定義樣式

#1. 如果修改展開后的內(nèi)容？

#2. 如何自定義標(biāo)題的樣式？

#3. 如何修改整個Item的樣式？

#API

#Collapse Props

#Collapse Item Props

#Collapse Event

#Collapse Item Event

#Collapse Methods

#Slot

通過折疊面板收納內(nèi)容區(qū)域

#平臺差異說明

#基本使用

默認(rèn)為手風(fēng)琴模式，即打開一個，另外所有的都會關(guān)閉?？梢詫?code>u-collapse的accordion設(shè)置為false，這樣可以允許打開多個面板

<template>
	<u-collapse>
		<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
			{{item.body}}
		</u-collapse-item>
	</u-collapse>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "賞識在于角度的轉(zhuǎn)換",
					body: "只要我們正確擇取一個合適的參照物乃至稍降一格去看待他人，值得賞識的東西便會撲面而來",
					open: true,
					disabled: true
				},{
					head: "生活中不是缺少美，而是缺少發(fā)現(xiàn)美的眼睛",
					body: "學(xué)會欣賞，實(shí)際是一種積極生活的態(tài)度，是生活的調(diào)味品，會在欣賞中發(fā)現(xiàn)生活的美",
					open: false,
				},{
					head: "周圍一些不起眼的人、事、物，或許都隱藏著不同凡響的智慧",
					body: "但是據(jù)說雕刻大衛(wèi)像所用的這塊大理石，曾被多位雕刻家批評得一無是處，有些人認(rèn)為這塊大理石采鑿得不好，有些人嫌它的紋路不夠美",
					open: false,
				}],
			}
		}
	}
</script>

#控制面板的初始狀態(tài)，以及是否可以操作

• 設(shè)置u-collapse-item的open參數(shù)為true，可以讓面板初始化時為打開狀態(tài)
• 如果設(shè)置u-collapse-item的disabled參數(shù)為true，那么面板會保持初始狀態(tài)，無法關(guān)閉或打開

<template>
	<u-collapse>
		<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open" :disabled="item.disabled">
			{{item.body}}
		</u-collapse-item>
	</u-collapse>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "賞識在于角度的轉(zhuǎn)換",
					body: "只要我們正確擇取一個合適的參照物乃至稍降一格去看待他人，值得賞識的東西便會撲面而來",
					open: true,
					disabled: true
				},{
					head: "生活中不是缺少美，而是缺少發(fā)現(xiàn)美的眼睛",
					body: "學(xué)會欣賞，實(shí)際是一種積極生活的態(tài)度，是生活的調(diào)味品，會在欣賞中發(fā)現(xiàn)生活的美",
					open: false,
				},{
					head: "周圍一些不起眼的人、事、物，或許都隱藏著不同凡響的智慧",
					body: "但是據(jù)說雕刻大衛(wèi)像所用的這塊大理石，曾被多位雕刻家批評得一無是處，有些人認(rèn)為這塊大理石采鑿得不好，有些人嫌它的紋路不夠美",
					open: false,
				}],
			}
		}
	}
</script>

#自定義樣式

在此組件中，可以通過多個方式對每個Item進(jìn)行樣式定義，我們可以從如下方面思考和著手：

#1. 如果修改展開后的內(nèi)容？

• 因?yàn)槭峭ㄟ^默認(rèn)的slot傳入的(見上方示例)，我們可以加一個view元素當(dāng)做外層，在父組件給它添加樣式，如下：

<template>
	<u-collapse :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
		<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
			<view class="collapse-item">
				{{item.body}}
			</view>
		</u-collapse-item>
	</u-collapse>
</template>

<style scoped>
	.collapse-item {
		color: red;
		padding-bottom: 10px;
	}
</style>

• 通過Collapse的body-style參數(shù)也可以配置主體內(nèi)容的樣式，需要注意上面的自定義slot內(nèi)容如果在父組件定義了樣式，會優(yōu)先起作用。

#2. 如何自定義標(biāo)題的樣式？

如果想修改頭部標(biāo)題的字體大小，顏色等，可以通過head-style參數(shù)修改。

#3. 如何修改整個Item的樣式？

有時候我們需要修改Item的整體樣式，比如將各個Item之間隔開，這時我們可以通過item-style參數(shù)進(jìn)行設(shè)置，比如：

<template>
	<u-collapse :item-style="itemStyle">
		......
	</u-collapse>
</template>

<script>
export default {
	data() {
		return {
			itemStyle: {
				marginTop: '20px'
			}
		}
	}
}
</script>

#API

#Collapse Props

#Collapse Item Props

#Collapse Event

注意：請在<u-collapse></u-collapse>上監(jiān)聽此事件

#Collapse Item Event

注意：請在<u-collapse-item></u-collapse-item>上監(jiān)聽此事件

#Collapse Methods

注意：此方法需要通過ref調(diào)用文章來源地址http://www.zghlxwxcb.cn/news/detail-810922.html

#Slot

到了這里，關(guān)于uniapp組件庫中Collapse 折疊面板 的使用方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！