**actions組件**
基本用法
~~~
maple.actions(options)
~~~
options說明
| 參數 | 說明 | 類型 |默認值 |
| --- | --- |--- |--- |--- |
| items | 表示內容的數組| array|空 |
|cancelText|取消按鈕的文本|string|取消
|cancelFn|點擊取消按鈕要運行的函數|function|null
|cancelStyle|取消按鈕的樣式|object|null
|itemStyle|每一個Item的樣式|object|null
|itemFn|點擊item時觸發的函數|function|null
|activeIndex|添加active類的item的索引|number|-1
items結構:如果數組的每一項為基礎數據類型,則將轉換為字符串顯示,如果是對象,需要包含text屬性作為顯示內容,如果有style屬性則設置為該item的樣式,否則使用itemStyle屬性對應的樣式
| 屬性 | 說明 | 類型 | 說明
| --- | --- | --- | --- |
| text| 顯示的內容 | string |
| style | 顯示的樣式 | object | 為單獨的某個item設置樣式可以用到改屬性
簡潔用法
~~~
/*
參數中的基本數據類型將作為內容展示到每個item上
參數中的第一個函數將作為回調函數在item點擊的時候被調用同時接受兩個參數,被點擊的item及其索引
參數中的第二個函數將作為回調函數在取消按鈕被點擊的時候調用
*/
maple.actions(1,2,3,4,5,(item,index)=>{
maple.alert(`你點擊了${item.text},索引為${index}`)
},()=>{
maple.alert('你點擊了取消')
})
~~~
~~~
/*
如果傳遞一個數組作為參數,則將數組做為items屬性來是使用
如果傳入了對象作為參數,則將對象作為props
*/
maple.actions(_.times(10,index=>({
text:index,
style:{fontSize:index+10+'px'}
})),{
itemStyle:{
color:'red'
}
})
~~~
~~~
/*
如果傳入的對象是一個表示樣式的對象,則可以直接作為通用樣式顯示
*/
maple(1,2,3,{color:'blue'})
//雖然你可以這樣使用,但是為了保證視覺統一,我們還是建議你使用樣式接口來生成通用樣式
//這種使用方式僅用在覆蓋通用樣式的時候才會用到,比如所有的頁面字體均是紅色,但是只有一個頁面或者一種情況字體為藍色
~~~