QuickTVUI

Appearance

Collapse ​

折叠面板，可用于设置、播放器菜单等场景

效果预览 ​

Collapse

一、集成 ​

第 1 步：组件标签 ​

点击查看源码
html
<template>

  //① 组件标签
  <qt-collapse
    ref="player_menu"
    class="collapse-menu-css"
    :collapse-item-list="collapseItemList">
  </qt-collapse>
</template>

<script>
export default {
  data() {
    return {
      //② 注册要展示的折叠面板的组件
      collapseItemList: [
        xxxxxxx,//折叠面板的组件一
        xxxxxxx,//折叠面板的组件二
        xxxxxxx,//折叠面板的组件三
        xxxxxxx,//折叠面板的组件四
      ]
    };
  },
};
</script>

<style>
</style>

第 2 步：定义折叠面板组件 ​

1、面板以<collapse-item>作为根标签 ​

点击查看源码
vue

<collapse-item ref="collapse_item">
<!-- 自定义面板内容 start-->
<!-- 自定义面板内容 end  -->
</collapse-item>

2、mixins QtICollapseItem ​

点击查看源码
vue
export default {
  mixins: [QtICollapseItem],
};

3、覆写方法 ​

点击查看源码
js
export default {
  methods: {
    //① 返回<collapse-item>的引用
    getCollapseItem() {
      return this.$refs.collapse_item;
    },

    //② 返回折叠菜单，折叠后可见高度
    getCollapseItemVisibleHeight() {
      return 65;
    },

    //③ 返回折叠菜单总的高度
    getCollapseItemHeight() {
      return 165;
    },
  },
};

二、面板样式 ​

1、面板标题 ​

折叠面板内置<collapse-item-title>作为标题 collapsed属性用来标识面板是否折叠

点击查看源码
vue
<template>
  <collapse-item ref="collapse_item"
                 :clipChildren="false" :clipPadding="false">
    <div class="list-view-button-root" :clipChildren="false" :clipPadding="false">
      <collapse-item-title
        class="collapse-item-title-css"
        :collapsed="!iCollapseItemShowing"
        title="面板标题"/>
    </div>
  </collapse-item>
</template>

2、面板列表内容 ​

折叠面板内置<collapse-item-content-list>作为列表形式的内容。

点击查看源码
vue
  <collapse-item ref="collapse_item"
                 :clipChildren="false" :clipPadding="false">
    <div class="list-view-button-root" :clipChildren="false" :clipPadding="false">
      <collapse-item-title
        class="collapse-item-title-css"
        :collapsed="!iCollapseItemShowing"
        title="面板标题"/>
      <collapse-item-content-list
        ref="item_list_view"
        <!- 内容宽度 -->
        :content-list-width="1920"
        <!- 内容高度 -->
        :content-list-height="100"
        @content-list-item-focus="onCollapseContentListItemFocus"
        @content-list-item-click="onCollapseContentListItemClick"
        :style="{opacity: iCollapseItemShowing ? 1 : 0}">
        <list-item type="1" :clipChildren="false" :clipPadding="false">
           <!-- 列表item -->
           <!-- -->
        </list-item>
      </collapse-item-content-list>
    </div>
  </collapse-item>
</template>

3、监听面板列表内容焦点content-list-item-focus和点击事件content-list-item-click ​

点击查看源码
vue
  <collapse-item ref="collapse_item"
                 :clipChildren="false" :clipPadding="false">
    <div class="list-view-button-root" :clipChildren="false" :clipPadding="false">
      <collapse-item-title
        class="collapse-item-title-css"
        :collapsed="!iCollapseItemShowing"
        title="面板标题"/>
      <collapse-item-content-list
        ref="item_list_view"
        <!- 内容宽度 -->
        :content-list-width="1920"
        <!- 内容高度 -->
        :content-list-height="100"
        @content-list-item-focus="onCollapseContentListItemFocus"
        @content-list-item-click="onCollapseContentListItemClick"
        :style="{opacity: iCollapseItemShowing ? 1 : 0}">
        <list-item type="1" :clipChildren="false" :clipPadding="false">
           <!-- 列表item -->
           <!-- -->
        </list-item>
      </collapse-item-content-list>
    </div>
  </collapse-item>
</template>

export default {
  mixins: [QtICollapseItem],
  methods: {
    onCollapseContentListItemFocus(index, hasFocus, item) {
    
    },
    onCollapseContentListItemClick(index, item) {
     
    },
  },
};

4、监听面板折叠 ​

点击查看源码
js
export default {
  mixins: [QtICollapseItem],
  methods: {
    //覆写此方法监听面板折叠
    onItemCollapsed(collapsed) {
    
    },
  },
};

三、 通信 ​

1、<collapse>页面中调用面板内容组件<collapse-item>的方法 ​

使用collapse的方法callCollapseItemMethod调用<collapse-item>方法

点击查看源码
js
 this.$refs.collapse.callCollapseItemMethod(
    collapseItemIndex,//面板内容组件所在的index
    'collapseItemMehtod',//面板内容组件的方法
    collapseItemMehtodParams,//面板内容组件的参数
);

2、<collapse-item>向<collapse>发送事件 ​

调用QtICollapseItem中emitCollapseItemEvent方法发送事件。

点击查看源码
vue
this.emitCollapseItemEvent('事件名称', 参数);
点击查看源码
vue
<template>
  <collapse-item ref="collapse_item"
                 :clipChildren="false" :clipPadding="false">
    <div class="list-view-button-root" :clipChildren="false" :clipPadding="false">
    </div>
  </collapse-item>
</template>
<script>

export default {
  mixins: [QtICollapseItem],
  data() {
    return {
      iCollapseItemShowing: true,
    };
  },
  methods: {
    onCollapseContentListItemClick(index, item) {
      this.emitCollapseItemEvent('collapse-item-rate-item-click', item);
    },
  },
};
</script>

<style scoped>

</style>

3、监听<collapse-item>向<collapse>发送的事件 ​

点击查看源码
vue
    <collapse
      ref="collapse"
      <!-- 接受事件 -->
      @collapse-item-rate-item-click="onCollapseItemRateClick">
    </collapse>