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折叠面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。