Element Collapse 折叠面板的使用方法


Posted in Javascript onJuly 26, 2020

本文来源于Element官方文档:

http://element-cn.eleme.io/#/zh-CN/component/collapse

基础用法

普通折叠面板

<el-collapse v-model="activeNames" @change="handleChange">
 <el-collapse-item title="一致性 Consistency" name="1">
  <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反馈 Feedback" name="2">
  <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
  <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency" name="3">
  <div>简化流程:设计简洁直观的操作流程;</div>
  <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
  <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability" name="4">
  <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
 </el-collapse-item>
</el-collapse>

带slot的折叠面板

<el-collapse accordion>
 <el-collapse-item>
  <template slot="title">
   一致性 Consistency<i class="header-icon el-icon-info"></i>
  </template>
  <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反馈 Feedback">
  <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
  <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>简化流程:设计简洁直观的操作流程;</div>
  <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
  <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
 </el-collapse-item>
</el-collapse>

Collapse Attributes

参数 说明 类型 可选值 默认值
accordion 是否手风琴模式 boolean false
value 当前激活的面板(如果是手风琴模式,绑定值类型需要为string,否则为array) string/array

Collapse Events

事件名称 说明 回调参数
change 当前激活面板改变时触发(如果是手风琴模式,参数 activeNames 类型为string,否则为array) (activeNames: array string)

Collapse Item Attributes

参数 说明 类型 可选值 默认值
name 唯一标志符 string/number
title 面板标题 string

手风琴效果

<el-collapse v-model="activeName" accordion>
 <el-collapse-item title="一致性 Consistency" name="1">
  <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反馈 Feedback" name="2">
  <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
  <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency" name="3">
  <div>简化流程:设计简洁直观的操作流程;</div>
  <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
  <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability" name="4">
  <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
 </el-collapse-item>
</el-collapse>
<script>
 export default {
  data() {
   return {
    activeName: '1'
   };
  }
 }
</script>

自定义面板标题

<el-collapse accordion>
 <el-collapse-item>
  <template slot="title">
   一致性 Consistency<i class="header-icon el-icon-info"></i>
  </template>
  <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反馈 Feedback">
  <div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div>
  <div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>简化流程:设计简洁直观的操作流程;</div>
  <div>清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;</div>
  <div>帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;</div>
  <div>结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。</div>
 </el-collapse-item>
</el-collapse>

到此这篇关于Element Collapse 折叠面板的使用方法的文章就介绍到这了,更多相关Element Collapse 折叠面板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 #Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
You might like
PHP中extract()函数的妙用分析
2012/07/11 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
tagName的使用,留一笔
2006/06/26 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
自我评价如何写好?
2014/01/05 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
国际贸易求职信
2014/07/05 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
自荐信格式模板
2015/03/27 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
学习nginx基础知识
2021/09/04 Servers
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers