Collapse 折叠面板

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Collapse折叠面板">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-collapse v-model="value1">
				<zk-collapse-item title="标题1" name="1">
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段内容这是一段内容这是一段内容这是一段内容。" />
					</view>
				</zk-collapse-item>
				<zk-collapse-item title="标题2" name="2">
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段内容这是一段内容这是一段内容这是一段内容。" />
					</view>
				</zk-collapse-item>
				<zk-collapse-item title="标题3" name="3">
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段内容这是一段内容这是一段内容这是一段内容。" />
					</view>
				</zk-collapse-item>
			</zk-collapse>
		</zk-theme>

		<!-- 手风琴模式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="手风琴模式" align="center" />
			<zk-collapse v-model="value2" accordion>
				<zk-collapse-item title="标题1" name="1">
					<view class="content">
						<zk-text type="primary" :size="28" text="手风琴模式，每次只能展开一个面板。" />
					</view>
				</zk-collapse-item>
				<zk-collapse-item title="标题2" name="2">
					<view class="content">
						<zk-text type="primary" :size="28" text="手风琴模式，每次只能展开一个面板。" />
					</view>
				</zk-collapse-item>
				<zk-collapse-item title="标题3" name="3">
					<view class="content">
						<zk-text type="primary" :size="28" text="手风琴模式，每次只能展开一个面板。" />
					</view>
				</zk-collapse-item>
			</zk-collapse>
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" align="center" />
			<zk-collapse v-model="value3">
				<zk-collapse-item title="正常面板" name="1">
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段正常面板的内容。" />
					</view>
				</zk-collapse-item>
				<zk-collapse-item title="禁用面板" name="2" disabled>
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段禁用面板的内容。" />
					</view>
				</zk-collapse-item>
			</zk-collapse>
		</zk-theme>

		<!-- 自定义标题内容 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义标题内容" align="center" />
			<zk-collapse v-model="value4">
				<zk-collapse-item name="1">
					<template #title>
						<view class="custom-title">
							<zk-icon name="home" size="32" color="#2979ff" />
							<zk-text type="primary" :size="28" text="自定义标题" color="#2979ff" margin="0 0 0 10rpx" />
						</view>
					</template>
					<view class="content">
						<zk-text type="primary" :size="28" text="这是一段自定义标题的内容。" />
					</view>
				</zk-collapse-item>
			</zk-collapse>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				value1: ['1'],
				value2: '',
				value3: [],
				value4: []
			}
		}
	}
</script>

<style lang="scss">
	 
 

	 
</style>