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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
layui动态渲染生成select的option值方法
Sep 23 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 self与$this的详解
2013/06/08 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
Node.js实现文件上传
2016/07/05 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python实现统计代码行数的小工具
2019/09/19 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
总经理任命书
2014/03/29 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
总结高并发下Nginx性能如何优化
2021/11/01 Servers
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis