怎样建个小公司的网站,简单网站模板,搞网站,用户网站模板通过折叠面板收纳内容区域 1.如何使用#xff1f;
可同时展开多个面板#xff0c;面板之间不影响
el-collapse v-modelactiveNames changehandleChangeel-collapse-item title一致性 Consistency name1
可同时展开多个面板面板之间不影响
el-collapse v-modelactiveNames changehandleChangeel-collapse-item title一致性 Consistency name1div与现实生活一致与现实生活的流程、逻辑保持一致遵循用户习惯的语言和概念/divdiv在界面中一致所有的元素和结构需保持一致比如设计样式、图标和文本、元素的位置等。/div/el-collapse-itemel-collapse-item title反馈 Feedback name2div控制反馈通过界面样式和交互动效让用户可以清晰的感知自己的操作/divdiv页面反馈操作后通过页面元素的变化清晰地展现当前状态。/div/el-collapse-itemel-collapse-item title效率 Efficiency name3div简化流程设计简洁直观的操作流程/divdiv清晰明确语言表达清晰且表意明确让用户快速理解进而作出决策/divdiv帮助用户识别界面简单直白让用户快速识别而非回忆减少用户记忆负担。/div/el-collapse-itemel-collapse-item title可控 Controllability name4div用户决策根据场景可给予用户操作建议或安全提示但不能代替用户进行决策/divdiv结果可控用户可以自由的进行操作包括撤销、回退和终止当前操作等。/div/el-collapse-item
/el-collapse
scriptexport default {data() {return {activeNames: [2]};},methods: {handleChange(val) {console.log(val);}}}
/script
2. 手风琴效果
每次只能展开一个面板
//通过 accordion 属性来设置是否以手风琴模式显示。el-collapse v-modelactiveName accordionel-collapse-item title一致性 Consistency name1div与现实生活一致与现实生活的流程、逻辑保持一致遵循用户习惯的语言和概念/divdiv在界面中一致所有的元素和结构需保持一致比如设计样式、图标和文本、元素的位置等。/div/el-collapse-itemel-collapse-item title反馈 Feedback name2div控制反馈通过界面样式和交互动效让用户可以清晰的感知自己的操作/divdiv页面反馈操作后通过页面元素的变化清晰地展现当前状态。/div/el-collapse-itemel-collapse-item title效率 Efficiency name3div简化流程设计简洁直观的操作流程/divdiv清晰明确语言表达清晰且表意明确让用户快速理解进而作出决策/divdiv帮助用户识别界面简单直白让用户快速识别而非回忆减少用户记忆负担。/div/el-collapse-itemel-collapse-item title可控 Controllability name4div用户决策根据场景可给予用户操作建议或安全提示但不能代替用户进行决策/divdiv结果可控用户可以自由的进行操作包括撤销、回退和终止当前操作等。/div/el-collapse-item
/el-collapse
scriptexport default {data() {return {activeName: 3};}}
/script
3.自定义面板标题
除了可以通过 title 属性以外还可以通过具名 slot 来实现自定义面板的标题内容以实现增加图标等效果。
el-collapse accordionel-collapse-itemtemplate slottitle一致性 Consistencyi classheader-icon el-icon-info/i/templatediv与现实生活一致与现实生活的流程、逻辑保持一致遵循用户习惯的语言和概念/divdiv在界面中一致所有的元素和结构需保持一致比如设计样式、图标和文本、元素的位置等。/div/el-collapse-itemel-collapse-item title反馈 Feedbackdiv控制反馈通过界面样式和交互动效让用户可以清晰的感知自己的操作/divdiv页面反馈操作后通过页面元素的变化清晰地展现当前状态。/div/el-collapse-itemel-collapse-item title效率 Efficiencydiv简化流程设计简洁直观的操作流程/divdiv清晰明确语言表达清晰且表意明确让用户快速理解进而作出决策/divdiv帮助用户识别界面简单直白让用户快速识别而非回忆减少用户记忆负担。/div/el-collapse-itemel-collapse-item title可控 Controllabilitydiv用户决策根据场景可给予用户操作建议或安全提示但不能代替用户进行决策/divdiv结果可控用户可以自由的进行操作包括撤销、回退和终止当前操作等。/div/el-collapse-item
/el-collapse
这些就是内容 折叠面板的大致内容如果想要深入浅出请移步Collapse折叠面板
