045_Collapse折叠面板
1. Collapse折叠面板
1.1. Collapse折叠面板通过折叠面板收纳内容区域。
1.2. Collapse Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
当前激活的面板(如果是手风琴模式, 绑定值类型需要为string, 否则为array) |
string / array |
无 |
无 |
accordion |
是否手风琴模式 |
boolean |
无 |
false |
1.3. Collapse Events
事件名称 |
说明 |
回调参数 |
change |
当前激活面板改变时触发(如果是手风琴模式, 参数activeNames类型为string, 否则为array) |
(activeNames: array / string) |
1.4. Collapse Item Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
name |
唯一标志符 |
string/number |
无 |
无 |
title |
面板标题 |
string |
无 |
无 |
disabled |
是否禁用 |
boolean |
无 |
无 |
2. Collapse折叠面板例子
2.1. 使用脚手架新建一个名为element-ui-collapse折叠面板的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Collapse from '../components/Collapse.vue'
import AccordionCollapse from '../components/AccordionCollapse.vue'
import MyselfCollapse from '../components/MyselfCollapse.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Collapse' },{ path: '/Collapse', component: Collapse },{ path: '/AccordionCollapse', component: AccordionCollapse },{ path: '/MyselfCollapse', component: MyselfCollapse }
]const router = new VueRouter({routes
})export default router
2.3. 在components下创建Collapse.vue
<template><div><h1>基础用法</h1><h4>可同时展开多个面板, 面板之间不影响。</h4><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></div>
</template><script>
export default {data () {return {activeNames: ['1']}},methods: {handleChange (val) {console.log(val)}}
}
</script>
2.4. 在components下创建AccordionCollapse.vue
<template><div><h1>手风琴效果</h1><h4>通过accordion属性来设置是否以手风琴模式显示。每次只能展开一个面板。</h4><el-collapse v-model="activeNames" 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></div>
</template><script>
export default {data () {return {activeName: '1'}}
}
</script>
2.5. 在components下创建MyselfCollapse.vue
<template><div><h1>自定义面板标题</h1><h4>除了可以通过title属性以外, 还可以通过具名slot来实现自定义面板的标题内容, 以实现增加图标等效果。</h4><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></div>
</template>
2.6. 运行项目, 访问http://localhost:8080/#/Collapse
2.7. 运行项目, 访问http://localhost:8080/#/AccordionCollapse
2.8. 运行项目, 访问http://localhost:8080/#/MyselfCollapse
045_Collapse折叠面板相关推荐
- jquery-12 折叠面板如何实现(两种方法)
jquery-12 折叠面板如何实现(两种方法) 一.总结 一句话总结:1.根据点击次数来判断显示还是隐藏,用data方法保证每个元素一个点击次数:2.找到元素的下一个,然后toggle实现显示隐藏. ...
- php中控制面板折叠,微信小程序折叠面板的实现方法示例
本文主要为大家详细介绍微信小程序实现折叠面板的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 实现原理 通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头 ...
- 面板——卡片面板、常规折叠面板、手风琴折叠
1. 卡片面板 2. 普通折叠面板 3. 手风琴面板 在普通面板上加 lay-accordion="" <%@ page language="java" ...
- EasyUI中Accordion折叠面板的简单使用
场景 效果 容器选项 名称 类型 描述 默认值 width number 折叠面板(Accordion)容器的宽度. auto height number 折叠面板(Accordion)容器的高度. ...
- jQuery easyUI--accordion折叠面板
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>acc ...
- jQuery EasyUI 折叠面板accordion的使用实例
1.对折叠面板区域 div 设置 class="easyui-accordion" 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性 ...
- bootstrap 隐藏元素_Bootstrap中折叠面板的样式内容
Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性.它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为. 运作方式 插件用 ...
- Accoridion折叠面板
详细操作见代码: <!doctype html> <html><head><meta charset="UTF-8"><tit ...
- vue animation css实现左右折叠面板
<div class="left" :class="boxshow ? 'a1': 'a2'" id="showBox">这里是 ...
最新文章
- 网站优化数据分析不建议你遗落这三点
- chart.js 饼图显示百分比_实战PyQt5: 135-数据可视化之QChart绘制饼图
- java手动线程池使用_Java手动配置线程池过程详解
- Laravel Cache 的缓存文件在到期后是否会自动删除
- 哪些人在听 60 亿流量《惊雷》?Python 告诉你 | 原力计划
- 窥探Swift之新添数据类型元组与可选值
- Bailian3704 扩号匹配问题【堆栈】
- JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)
- 4.PHP的运行方式
- html文件文本预处理,HTML文件文本信息预处理技术.pdf
- Web Server与App Server
- 日本家用电器技术标准及IEC对照介绍
- HI3798MV200驱动移植
- win10做文件服务器怎么精简,win10精简系统怎么做到
- 关于springboot:Spring-ContentNegotiation内容协商之使用篇一
- 腾讯云服务器+RAKSmart国内外服务器使用记录
- python实验原理_Python实现蒙特卡洛算法小实验过程详解
- 磨金石教育摄影技能干货分享|优秀作品欣赏—技巧十足的艺术摄影
- 目标检测使用的数据增强方法汇总
- 关于AndroBench在Android 10以后性能衰减的问题分析
热门文章
- C# 创建网站 无法启动与停止的问题
- IntelliJ IDEA 的 project 和 module 区别与关系
- DICKSON隆重推荐的博客 --- SAP
- Mysql导入zabbix的sql语句时报错:ERROR 1045 (28000)
- 定义了浮动元素后margin-bottom失效的解决办法
- Python JS Jquery Json 转换关系
- 排序算法学习——冒泡排序
- 解決yum [Errno -1] Metadata file does not match checksum
- Ansi与Unicode及慎用W2A等
- 只能数字或小数 只能有一个小数点并且第一位不能为小数点,还有小数点后面限制两位