Vue EasyUI 分類

2020-06-24 11:40 更新

分類( Accordion )允許您提供多個(gè)面板( Panel ),并同時(shí)顯示若干個(gè)面板( Panel )。提供的每個(gè)面板( Panel )都有展開和折疊的內(nèi)建支持。 用戶可自定義被選中的面板( Panel )。若未指定,則默認(rèn)選中第一個(gè)面板( Panel )。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
border boolean 是否顯示邊框。 true
multiple boolean 為True時(shí)展開多個(gè)面板。 false
animte boolean 定義展開或折疊面板時(shí)是否顯示動(dòng)畫效果。 false
selectedIndex number, array 已初始化的選中面板索引。 0

事件列表

名稱 參數(shù) 作用描述
panelSelect panel 選中面板時(shí)觸發(fā)。
panelUnselect panel 未選中面板時(shí)觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
select index void 選擇指定的面板。
unselect index void 取消選擇指定的面板。
getPanel index AccordionPanel 獲得指定面板。
getPanelIndex panel number 獲得指定面板索引。
getSelectedIndex none number 獲取第一個(gè)選中面板的索引。
getSelectedPanel none AccordionPanel 獲取第一個(gè)選中的面板。
getSelectedPanels none AccordionPanel[] 獲取所有選中的面板。

注:
- 繼承: None 。

使用方法

<Accordion style="height:250px">
  <AccordionPanel :title="'Title1'">
    <p>Hello user.</p>
  </AccordionPanel>
  <AccordionPanel :title="'Title2'">
    <p>Welcome to W3Cschool.</p>
  </AccordionPanel>
  <AccordionPanel :title="'Title3'">
    <p>You'll learn something.</p>
  </AccordionPanel>
</Accordion>

分類面板( AccordionPanel )

  • 分類面板( AccordionPanel )選項(xiàng)繼承自面板( Panel ),以下是附加屬性:
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
selected boolean 是否選擇面板。 false

  • 方法列表:
名稱 參數(shù) 返回值 作用描述
select none void 選擇面板。
unselect none void 取消選擇面板。
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)