ElementUI Collapse 折叠面板

基础用法
html:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/lib/index.js"></script>
<div id="app">
<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>

JS:

var Main = {data() {return {activeNames: ['1']};},methods: {handleChange(val) {console.log(val);}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

手风琴效果
每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

<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>

自定义面板标题
除了可以通过 title 属性以外，还可以通过具名 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

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

Collapse Events

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

Collapse Item Attributes

参数	说明	类型	可选值	默认值
name	唯一标志符	string/number	—	—
title	面板标题	string	—	—
disabled	是否禁用	boolean	—	—

ElementUI Collapse 折叠面板相关推荐

element-plus 组件解析 - Collapse 折叠面板
element-plus 组件解析 - Collapse 折叠面板 1, 组件介绍 2,组件组成 3,组件实现 3.1,el-collapse 1,v-model="activeNames& ...
用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴
项目上有个时间轴功能,我看了一下element上有时间轴功能,不过有点太简单,我想改造一下这个时间轴,记录一下,用Timeline 时间线和 Collapse 折叠面板,两个加起来做了一时间轴,当是 ...
elementUI中折叠面板箭头图标位置调整
工作中有时设计图要求实现折叠面板需求,element官网给出的示例中,面板展开收起的箭头图标是在最右面,如图所示: 但由于设计需要,需要将箭头放在最左边,通过f12代码调试发现header是flex布 ...
collapse 微信小程序_微信小程序之有赞组件Collapse折叠面板的使用
1. 使用指南在 app.json 或 index.json 中引入组件 es6 "usingComponents": { "van-collapse": & ...
ElementPlus的Collapse 折叠面板问题
我也不明白为什么会报这个错误,把关于ts的代码改成js的就可以了.. ERROR in ./src/views/Home.vue?vue&type=script&lang=ts& ...
el-menu,Collapse 折叠面板,收起后子菜单弹窗popover跟菜单的距离
如图上面的距离,ui强调受气候菜单的宽度为48px,导致距离过大解决办法查看空值太,发现这个树形影响了位置这个是在全局样式下的,直接修改会导致全局样式改变,这样行不通,需要添加一个class,查 ...
修复uview的collapse折叠面板箭头不能变向的官方bug(小程序里)
打开u-collapse-item.vue文件,按图中修改代码. 代码修改说明:其实就是把 .u-arrow-down-icon和.u-arrow-down-icon-active这两个类名绑定到了的 ...
Vue3折叠面板（Collapse）
可自定义设置以下属性: 折叠面板数据,可使用 slot 替换对应索引的 header 和 text(collapseData),必传,类型:Array<{key?: string, header ...
解决折叠面板Collapse上点击复选框会触发折叠面板问题
在项目中有一个小需求,需要在折叠面板头部加一个复选框按钮,点击复选框,修改数据状态,这里的问题是,点击复选框,会触发折叠面板,效果如下. 这里我查阅了一下资料,这是因为事件传递导致的,点击复选框,复选 ...
045_Collapse折叠面板
1. Collapse折叠面板 1.1. Collapse折叠面板通过折叠面板收纳内容区域. 1.2. Collapse Attributes 参数说明类型可选值默认值 value / v-m ...

ElementUI Collapse 折叠面板

ElementUI Collapse 折叠面板

ElementUI Collapse 折叠面板相关推荐

最新文章

热门文章