Collapse 折疊面板

本文轉載自查看原文 2018-03-16 06:56 5124 others組件

通過折疊面板收納內容區域

基礎用法

可同時展開多個面板，面板之間不影響

 1 <el-collapse v-model="activeNames" @change="handleChange">
 2   <el-collapse-item title="一致性 Consistency" name="1">
 3     <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
 4     <div>在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div>
 5   </el-collapse-item>
 6   <el-collapse-item title="反饋 Feedback" name="2">
 7     <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
 8     <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。</div>
 9   </el-collapse-item>
10   <el-collapse-item title="效率 Efficiency" name="3">
11     <div>簡化流程：設計簡潔直觀的操作流程；</div>
12     <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
13     <div>幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。</div>
14   </el-collapse-item>
15   <el-collapse-item title="可控 Controllability" name="4">
16     <div>用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
17     <div>結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
18   </el-collapse-item>
19 </el-collapse>
20 <script>
21   export default {
22     data() {
23       return {
24         activeNames: ['1']
25       };
26     },
27     methods: {
28       handleChange(val) {
29         console.log(val);
30       }
31     }
32   }
33 </script>

View Code

手風琴效果

每次只能展開一個面板

通過 accordion 屬性來設置是否以手風琴模式顯示。

 1 <el-collapse v-model="activeName" accordion>
 2   <el-collapse-item title="一致性 Consistency" name="1">
 3     <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
 4     <div>在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div>
 5   </el-collapse-item>
 6   <el-collapse-item title="反饋 Feedback" name="2">
 7     <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
 8     <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。</div>
 9   </el-collapse-item>
10   <el-collapse-item title="效率 Efficiency" name="3">
11     <div>簡化流程：設計簡潔直觀的操作流程；</div>
12     <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
13     <div>幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。</div>
14   </el-collapse-item>
15   <el-collapse-item title="可控 Controllability" name="4">
16     <div>用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
17     <div>結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
18   </el-collapse-item>
19 </el-collapse>
20 <script>
21   export default {
22     data() {
23       return {
24         activeName: '1'
25       };
26     }
27   }
28 </script>

View Code

自定義面板標題

除了可以通過 title 屬性以外，還可以通過具名 slot 來實現自定義面板的標題內容，以實現增加圖標等效果。

 1 <el-collapse accordion>
 2   <el-collapse-item>
 3     <template slot="title">
 4       一致性 Consistency<i class="header-icon el-icon-info"></i>
 5     </template>
 6     <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
 7     <div>在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div>
 8   </el-collapse-item>
 9   <el-collapse-item title="反饋 Feedback">
10     <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
11     <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。</div>
12   </el-collapse-item>
13   <el-collapse-item title="效率 Efficiency">
14     <div>簡化流程：設計簡潔直觀的操作流程；</div>
15     <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
16     <div>幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。</div>
17   </el-collapse-item>
18   <el-collapse-item title="可控 Controllability">
19     <div>用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
20     <div>結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
21   </el-collapse-item>
22 </el-collapse>

View Code

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Element Collapse 折疊面板問題 20 幫助反饋+關於頁面簡單實現（Collapse 折疊面板） element Collapse折疊面板嵌套table使用導致展開面板的時候面板高度跳躍 Vue 折疊面板Collapse在標題上添加組件后，阻止面板冒泡的用法 ant design Collapse 折疊面板右上角增加按鈕 vue+element ui項目總結點（五）Carousel 走馬燈組件、Collapse 折疊面板、Tree 樹形控件使用CSS實現折疊面板總結 MUI-折疊面板效果accordion layui折疊面板阻止冒泡事件 vue使用element實現折疊面板---菜單的折疊與展開