快捷導(dǎo)航

Element Collapse 折疊面板的使用方法

更新時間：2020年07月26日 11:07:17 作者：究極死胖獸

這篇文章主要介紹了Element Collapse 折疊面板的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文來源于Element官方文檔：

http://element-cn.eleme.io/#/zh-CN/component/collapse

基礎(chǔ)用法

普通折疊面板

<el-collapse v-model="activeNames" @change="handleChange">
 <el-collapse-item title="一致性 Consistency" name="1">
  <div>與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
  <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計樣式、圖標和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反饋 Feedback" name="2">
  <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
  <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當前狀態(tài)。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency" name="3">
  <div>簡化流程：設(shè)計簡潔直觀的操作流程；</div>
  <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
  <div>幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability" name="4">
  <div>用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
  <div>結(jié)果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
 </el-collapse-item>
</el-collapse>

帶slot的折疊面板

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

Collapse Attributes

參數(shù)	說明	類型	可選值	默認值
accordion	是否手風(fēng)琴模式	boolean	—	false
value	當前激活的面板(如果是手風(fēng)琴模式，綁定值類型需要為string，否則為array)	string/array	—	—

Collapse Events

事件名稱	說明	回調(diào)參數(shù)
change	當前激活面板改變時觸發(fā)(如果是手風(fēng)琴模式，參數(shù) activeNames 類型為string，否則為array) (activeNames: array	string)

Collapse Item Attributes

參數(shù)	說明	類型	可選值	默認值
name	唯一標志符	string/number	—	—
title	面板標題	string	—	—

手風(fēng)琴效果

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

自定義面板標題

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

到此這篇關(guān)于Element Collapse 折疊面板的使用方法的文章就介紹到這了,更多相關(guān)Element Collapse 折疊面板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: