折叠面板 Collapse

基础用法

• 使用步骤：

1. 自定义折叠面板item组件。有需要则在组件中声明onCollapseItemExpand(value: boolean): void方法。
2. <qt-collapse></qt-collapse>标签包裹自定义的折叠面板item组件。
3. 调用QTICollapse``init接口进行初始化。
4. 有需要则监听QTICollapse的onCollapseItemExpand事件。

• 代码示例：
  点击查看源码

  TypeScript

  <template>
  	<div class='es-sdk-root-css'>
  		<div class='es-sdk-content-row-css'>
  			<s-text-button text='收缩' @onButtonClicked='onCollapseButtonClicked' />
  			<s-text-button text='展开' @onButtonClicked='onExpandButtonClicked' />
  			<s-text-button text='展开第一个' @onButtonClicked='onOneButtonClicked' />
  			<s-text-button text='展开第二个' @onButtonClicked='onTwoButtonClicked' />
  			<s-text-button text='展开第三个' @onButtonClicked='onThreeButtonClicked' />
  			<s-text-button text='展开第四个' @onButtonClicked='onFourButtonClicked' />
  			<s-text-button text='调用第一个Item的方法' @onButtonClicked='onCallButtonClicked' />
  		</div>
  		<qt-collapse
  			ref='collapseRef'
  			@onCollapseItemExpand='onCollapseItemExpand'
  			class='qt-collapse-css'>
  			<qt-collapse-item-green @onCollapseItemGreenExpand='onCollapseItemGreenExpand' />
  			<qt-collapse-item-purple />
  			<qt-collapse-item-red />
  			<qt-collapse-item-yellow />
  		</qt-collapse>
  	</div>
  </template>
  
  <script lang='ts'>
  
  import {ref} from 'vue';
  import {defineComponent} from '@vue/runtime-core';
  import QTCollapseItemGreen from './item/qt-collapse-item-green.vue';
  import QTCollapseItemPurple from './item/qt-collapse-item-purple.vue';
  import QTCollapseItemRed from './item/qt-collapse-item-red.vue';
  import QTCollapseItemYellow from './item/qt-collapse-item-yellow.vue';
  import {QTGreenCollapseItem} from './item/QTGreenCollapseItem';
  import {ESLogLevel, useESLog} from '@extscreen/es3-core';
  import {QTCollapse, QTCollapseItem, QTICollapse} from '@quicktvui/quicktvui3';
  
  const TAG = 'QTCollapsePage';
  
  export default defineComponent({
  	name: '使用初探',
  	components: {
  		'qt-collapse-item-green': QTCollapseItemGreen,
  		'qt-collapse-item-purple': QTCollapseItemPurple,
  		'qt-collapse-item-red': QTCollapseItemRed,
  		'qt-collapse-item-yellow': QTCollapseItemYellow,
  	},
  	setup(props, context) {
  		const collapseRef = ref<QTICollapse>();
  		const log = useESLog();
  
  		function onESCreate() {
  			const collapse: QTCollapse = {
  				width: 1920,
  				height: 1000,
  				defaultIndex: 2,//默认0
  				expandDuration: 200,//默认200
  				itemList: [
  					{
  						height: 200,
  						collapseHeight: 150,
  					},
  					{
  						height: 300,
  						collapseHeight: 250,
  					},
  					{
  						height: 200,
  						collapseHeight: 150,
  					},
  					{
  						height: 100,
  						collapseHeight: 50,
  					},
  				],
  			};
  			collapseRef.value?.init(collapse);
  		}
  
  		function onCollapseItemExpand(index: number, item: QTCollapseItem) {
  			if (log.isLoggable(ESLogLevel.DEBUG)) {
  				log.d(TAG, '-------onCollapseItemExpand------->>>>', item, index);
  			}
  		}
  
  		function onCollapseItemGreenExpand(value) {
  			if (log.isLoggable(ESLogLevel.DEBUG)) {
  				log.d(TAG, '-------onCollapseItemGreenExpand------>>>>', value);
  			}
  		}
  
  		function onCollapseButtonClicked() {
  			collapseRef.value?.collapse();
  		}
  
  		function onExpandButtonClicked() {
  			collapseRef.value?.expand();
  		}
  
  		function onOneButtonClicked() {
  			collapseRef.value?.expandItem(0);
  		}
  
  		function onTwoButtonClicked() {
  			collapseRef.value?.expandItem(1);
  		}
  
  		function onThreeButtonClicked() {
  			collapseRef.value?.expandItem(2);
  		}
  
  		function onFourButtonClicked() {
  			collapseRef.value?.expandItem(3);
  		}
  
  		function onCallButtonClicked() {
  			const item = collapseRef.value?.getItem(0) as QTGreenCollapseItem;
  			item.showText('Hello world!');
  		}
  
  		return {
  			collapseRef,
  			onESCreate,
  			onOneButtonClicked,
  			onTwoButtonClicked,
  			onThreeButtonClicked,
  			onFourButtonClicked,
  			onCollapseItemExpand,
  			onCollapseItemGreenExpand,
  			onCallButtonClicked,
  			onCollapseButtonClicked,
  			onExpandButtonClicked,
  		};
  	},
  });
  
  </script>
  
  <style>
  .qt-collapse-css {
  	width: 1920px;
  	height: 800px;
  	position: absolute;
  	bottom: 0;
  	background-color: palevioletred;
  }
  </style>

数据结构

• QTCollapse

参数	描述	类型	必填
width	折叠面板的宽度	number	是
height	折叠面板的高度	number	是
expandDuration	折叠面板展开的时间，默认200ms	number	否
defaultIndex	折叠面板默认展开的位置，默认第0个	number	否
itemList	各个折叠面板的数据	Array<QTCollapseItem>	是

• QTCollapseItem

参数	描述	类型	必填
height	折叠面板的高度	number	是
collapseHeight	折叠面板隐藏的宽度	number	是

• QTICollapseItem

参数	描述	类型	必填
onCollapseItemExpand(value: boolean)	折叠面板展开的回调接口	funciton	否

QTICollapse接口

• init

完整方法声明：function init(collapse: QTCollapse): void
该方法用于初始化折叠面板。

• getItem

完整方法声明：function getItem(index: number): QTICollapseItem
该方法根据index获取面板item的引用。

• expandItem

完整方法声明：function expandItem(index: number): void
该方法根据索引展开面板item。

• expand

完整方法声明：function expand(): void
该方法展开所有的面板item。

• collapse

完整方法声明：function collapse(): void
该方法展开折叠所有的面板item。

QTICollapseItem接口

• onCollapseItemExpand

完整方法声明：function onCollapseItemExpand(value: boolean):void
折叠面板展开时回调接口。

事件

• onCollapseItemExpand

完整事件声明：function onCollapseItemExpand(index: number, item: QTCollapseItem):void
折叠面板展开时回调接口。

参数	描述	类型	非空
index	折叠面板的索引	number	是
item	折叠面板item数据结构	QTCollapseItem	是