折叠面板 Collapse
基础用法
![](/component/collapse/collapse_component.gif)
- 使用步骤:
- 自定义折叠面板item组件。有需要则在组件中声明
onCollapseItemExpand(value: boolean): void
方法。 <qt-collapse></qt-collapse>
标签包裹自定义的折叠面板item组件。- 调用
QTICollapse``init
接口进行初始化。 - 有需要则监听
QTICollapse
的onCollapseItemExpand
事件。
- 代码示例:
点击查看源码
vue<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 | 是 |