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>
相关推荐
RainbowSea23 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴28 分钟前
笨方法学python -练习14
java·前端·python
Mintopia35 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖39 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试