uView Collapse 折叠面板

简介: uView Collapse 折叠面板

通过折叠面板收纳内容区域

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

<template>
  <u-collapse
    @change="change"
    @close="close"
    @open="open"
  >
    <u-collapse-item
      title="文档指南"
      name="Docs guide"
    >
      <text class="u-collapse-content">涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川</text>
    </u-collapse-item>
    <u-collapse-item
      title="组件全面"
      name="Variety components"
    >
      <text class="u-collapse-content">众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用</text>
    </u-collapse-item>
    <u-collapse-item
      title="众多利器"
      name="Numerous tools"
    >
      <text class="u-collapse-content">众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨</text>
    </u-collapse-item>
  </u-collapse>
</template>
<script>
  export default {
    methods: {
            open(e) {
              // console.log('open', e)
            },
            close(e) {
              // console.log('close', e)
            },
            change(e) {
              // console.log('change', e)
            }
        }
  }
</script>

copy

#控制面板的初始状态,以及是否可以操作

  • 设置u-collapse-itemname参数,并在u-collapse中指定数组value可以让面板初始化时为打开状态
  • 如果设置u-collapse-itemdisabled参数,那么面板会保持被禁用状态
<template>
  <u-collapse
    :value="['2']"
  >
    <u-collapse-item
      title="文档指南"
    >
      <text class="u-collapse-content">涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川</text>
    </u-collapse-item>
    <u-collapse-item
      disabled
      title="组件全面"
    >
      <text class="u-collapse-content">众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用</text>
    </u-collapse-item>
    <u-collapse-item
      name="2"
      title="众多利器"
    >
      <text class="u-collapse-content">众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨</text>
    </u-collapse-item>
  </u-collapse>
</template>
<script>
  export default {
    methods: {
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      }
    }
  }
</script>

copy

#手风琴模式

  • u-collapseaccordion设置为true,这样可以开启手风琴模式
<template>
    <view class="u-page__item">
        <text class="u-page__item__title">手风琴模式</text>
        <u-collapse
                accordion
        >
            <u-collapse-item
                    title="文档指南"
            >
                <text class="u-collapse-content">涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川</text>
            </u-collapse-item>
            <u-collapse-item
                    title="组件全面"
            >
                <text class="u-collapse-content">众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用</text>
            </u-collapse-item>
            <u-collapse-item
                    title="众多利器"
            >
                <text class="u-collapse-content">众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨</text>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>
<style lang="scss">
    .u-page {
        padding: 0;
        &__item {
    
            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;
        
                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }
    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>

copy

#自定义标题和内容

  • 通过设置slot来自定义标题和内容
<template>
    <view class="u-page__item">
        <text class="u-page__item__title">自定义标题和内容</text>
        <u-collapse
                accordion
        >
            <u-collapse-item
            >
                <text slot="title" class="u-page__item__title__slot-title">文档指南</text>
                <text class="u-collapse-content">涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川</text>
            </u-collapse-item>
            <u-collapse-item
                    title="组件全面"
            >
                <u-icon name="tags-fill" size="20" slot="icon"></u-icon>
                <text class="u-collapse-content">众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用</text>
            </u-collapse-item>
            <u-collapse-item
                    title="众多利器"
            >
                <text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
                <text class="u-collapse-content">众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨</text>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>
<style lang="scss">
    .u-page {
        padding: 0;
        &__item {
    
            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;
        
                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }
    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>
相关文章
|
9月前
|
JavaScript
vue element plus Collapse 折叠面板
vue element plus Collapse 折叠面板
170 0
|
4月前
|
搜索推荐
uview下拉菜单Dropdown整合个性化下拉
uview下拉菜单Dropdown整合个性化下拉
147 5
|
6月前
|
JavaScript 容器
Vue3折叠面板(Collapse)
该组件提供了一个高度可定制的折叠面板,支持多种属性设置,包括折叠面板数据、激活状态、禁用选项、边框风格、复制功能等,并可通过插槽进行进一步自定义。其丰富的样式控制选项使得面板能够适应各种场景需求。在线预览展示了不同配置下的效果。组件基于 Vue 3 开发,利用 `requestAnimationFrame` 模拟实现动画效果,并集成了按钮等其他自定义组件。
184 1
Vue3折叠面板(Collapse)
|
5月前
|
JavaScript 前端开发
vue实现侧边折叠菜单栏手风琴效果
该文章介绍了如何使用Vue.js实现具有手风琴效果的侧边折叠菜单栏,包括HTML结构设计、CSS样式设置以及JavaScript交互逻辑的编写。
|
7月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
141 1
|
8月前
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
290 4
|
9月前
|
移动开发 小程序 API
uniapp组件库中Collapse 折叠面板 的使用方法
uniapp组件库中Collapse 折叠面板 的使用方法
1059 1
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
解决uviewui向下展开菜单u-dropdown组件收起样式层叠问题
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug

热门文章

最新文章