折叠面板

ux-accordion-card 组件说明

ux-accordion-card 折叠面板组件以插槽作为核心，让开发者更灵活地实现折叠展示功能。

运行图示

组件属性

组件插槽

1 title 标题插槽
2 body 主体内容插槽

组件事件

@open 折叠主体展示时触发；
@close 折叠主体隐藏时触发；

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">折叠面板</text>
		<view class="ux-mt">
			<ux-accordion-card 
			styles="background:#FFFFFF;" 
			:status="currentIndex == 0" 
			@open="open(0)" 
			@close="close">
				<template v-slot:title>
					<view  
					class="ux-accordion-title ux-row ux-nowrap ux-align-items-center ux-space-between">
						<text 
						class="ux-components-list-text ux-primary-text">面板 01</text>
						<text 
						:class="[currentIndex == 0 ? 'ux-primary-color' : 'ux-color-grey3']" 
						class="ux-components-list-icon ux-icons">{{"\ue87d"}}</text>
					</view>
				</template>
				<template v-slot:body>
					<view 
					v-for="item in 5" 
					class="ux-flex ux-row ux-nowrap ux-align-items-center" 
					hover-class="ux-tap">
						<view 
						class="ux-list-body" 
						:class="item < 5 ? 'ux-border-b' : ''">
							<view class="ux-list-title">
								<text 
								class="ux-list-title-text ux-list-one-line ux-primary-text">{{item}}. 标题文本</text>
							</view>
						</view>
						<text
						class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
					</view>
				</template>
			</ux-accordion-card>
		</view>
		<view class="ux-mt">
			<ux-accordion-card 
			styles="background:#FFFFFF;" 
			:status="currentIndex == 1" 
			@open="open(1)" 
			@close="close">
				<template v-slot:title>
					<view  
					class="ux-accordion-title ux-row ux-nowrap ux-align-items-center ux-space-between">
						<text 
						class="ux-components-list-text ux-primary-text">面板 02</text>
						<text 
						:class="[currentIndex == 0 ? 'ux-primary-color' : 'ux-color-grey3']" 
						class="ux-components-list-icon ux-icons">{{"\ue61e"}}</text>
					</view>
				</template>
				<template v-slot:body>
					<image 
					mode="widthFix" 
					style="width:690rpx;" 
					src="https://img0.baidu.com/it/u=398355741,907671611&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"></image>
				</template>
			</ux-accordion-card>
		</view>
		<view class="ux-mt">
			<ux-accordion-card 
			styles="background:#FFFFFF;" 
			:status="currentIndex == 2" 
			@open="open(2)" 
			@close="close">
				<template v-slot:title>
					<view  
					class="ux-accordion-title ux-row ux-nowrap ux-align-items-center ux-space-between">
						<text 
						class="ux-components-list-text ux-primary-text">面板 03</text>
						<text 
						:class="[currentIndex == 0 ? 'ux-primary-color' : 'ux-color-grey3']" 
						class="ux-components-list-icon ux-icons">{{"\ue61f"}}</text>
					</view>
				</template>
				<template v-slot:body>
					<view 
					v-for="item in 5" 
					class="ux-flex ux-row ux-nowrap ux-align-items-center" 
					hover-class="ux-tap">
						<view 
						class="ux-list-body" 
						:class="item < 5 ? 'ux-border-b' : ''">
							<view class="ux-list-title">
								<text 
								class="ux-list-title-text ux-list-one-line ux-primary-text">{{item}}. 标题文本</text>
							</view>
						</view>
						<text
						class="ux-list-arrow-right ux-icons ux-color-grey3">{{"\ue601"}}</text>
					</view>
				</template>
			</ux-accordion-card>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default{
	data(){
		return {
			currentIndex : 1
		}
	},
	methods:{
		open : function(idx:number){
			this.currentIndex = idx;
		},
		close:function(){
			this.currentIndex = -1;
		}
	}
}
</script>
<style scoped>
</style>