快捷導(dǎo)航

Element Collapse 折疊面板的使用方法

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

這篇文章主要介紹了Element Collapse 折疊面板的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
  <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反饋 Feedback" name="2">
  <div>控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；</div>
  <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency" name="3">
  <div>簡化流程：設(shè)計(jì)簡潔直觀的操作流程；</div>
  <div>清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；</div>
  <div>幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability" name="4">
  <div>用戶決策：根據(jù)場(chǎng)景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；</div>
  <div>結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。</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)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
  <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
 </el-collapse-item>
 <el-collapse-item title="反饋 Feedback">
  <div>控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；</div>
  <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
 </el-collapse-item>
 <el-collapse-item title="效率 Efficiency">
  <div>簡化流程：設(shè)計(jì)簡潔直觀的操作流程；</div>
  <div>清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；</div>
  <div>幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。</div>
 </el-collapse-item>
 <el-collapse-item title="可控 Controllability">
  <div>用戶決策：根據(jù)場(chǎng)景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；</div>
  <div>結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。</div>
 </el-collapse-item>
</el-collapse>

Collapse Attributes

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

Collapse Events

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

Collapse Item Attributes

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

手風(fēng)琴效果

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

自定義面板標(biāo)題

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

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

您可能感興趣的文章: