# toolbar組件 * * * tool bar 組件 ### 基本用法 * tool bar 組件 * 圖標依賴于iconfont字體庫 ~~~html <script> export default{ data () { return { buttonListData: [ { authName: '新建', operationType: 'create', datas: { authId: '3434965240233480124', viewId: '-5986396426325309878' } }, { authName: '修改', operationType: 'update', datas: { authId: '-2974825467645112856', viewId: '-5986396426325309878' } }, { authName: '批量刷新', operationType: 'batchFresh', datas: { isDoTrigger:"0" } }, { authName: '批量修改', operationType: 'batchUpdate', datas: null }, ] } }, methods: { buttonEvent(){ console.log(arguments) } } } </script> <div class=" demo-block"> <cap4-tool-bar :buttonListData="buttonListData" @buttonEvent="buttonEvent"></cap4-tool-bar> </div> ~~~ ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | | --- | --- | --- | --- | --- | | buttonListData | button列表 (必填)) | Array | — | — | | buttonEvent | 事件回調 | Function | — | — | ### buttonListData | 參數 | 說明 | 類型 | 可選值 | 默認值 | | --- | --- | --- | --- | --- | | authName | 顯示label | String | — | — | | datas | 傳入的data | Object | — | — | | operationType | button type (必填) | String | create/update/batchUpdate/batchFresh/delete/lock/unlock/importAndExport/query/statistics/print/viewLog | — | ### Event | 事件名稱 | 說明 | 回調參數 | | --- | --- | --- | | buttonEvent | 點擊事件回調 | callBackArr, viewBid, authBid, name | ### buttonEvent回調args | 參數 | 說明 | 類型 | 可選值 | 默認值 | | --- | --- | --- | --- | --- | | callBackArr | 點擊類型 | Array | — | — | | viewBid | viewId | Number | — | — | | authBid | authId | Number | — | — | | name | 按鈕label | String | — | — |