## Button 按鈕 基礎組件，觸發業務邏輯時使用 ### 代碼示例 ```html <cvu-button type="primary" round>主要按鈕</cvu-button> ``` ***** 按鈕類型 > 按鈕類型有：默認按鈕、主按鈕、虛線按鈕、文字按鈕以及四種顏色按鈕。 > 通過設置type為primary、dashed、text、info、success、warning、error創建不同樣式的按鈕，不設置為默認樣式。  ```html cvu-button>Default</cvu-button> <cvu-button type="primary">Primary</cvu-button> <cvu-button type="dashed">Dashed</cvu-button> <cvu-button type="text">Text</cvu-button> <br><br> <cvu-button type="info">Info</cvu-button> <cvu-button type="success">Success</cvu-button> <cvu-button type="warning">Warning</cvu-button> <cvu-button type="error">Error</cvu-button> ``` 幽靈按鈕 > 幽靈按鈕將其他按鈕的內容反色，背景變為透明，常用在有色背景上。 > 設置`ghost`屬性  ```html <cvu-button type="default" ghost>Default</cvu-button> <cvu-button type="primary" ghost>Primary</cvu-button> <cvu-button type="dashed" ghost>Dashed</cvu-button> <cvu-button type="text" ghost>Text</cvu-button> <br><br> <cvu-button type="info" ghost>Info</cvu-button> <cvu-button type="success" ghost>Success</cvu-button> <cvu-button type="warning" ghost>Warning</cvu-button> <cvu-button type="error" ghost>Error</cvu-button> ``` 圖標按鈕及按鈕形狀 > 通過設置icon屬性在Button內嵌入一個Icon，或者直接在Button內使用Icon組件。 > 使用Button的icon屬性，圖標位置將在最左邊，如果需要自定義位置，需使用Icon組件。 > 通過設置shape屬性為circle，可將按鈕置為圓的形狀。  ```html <cvu-button type="primary" icon="ios-search">search</cvu-button> <cvu-button type="primary" shape="circle" icon="ios-search"></cvu-button> <cvu-button type="primary" icon="ios-search">Search</cvu-button> <cvu-button type="primary" shape="circle" icon="ios-search">Search</cvu-button> <cvu-button type="primary" shape="circle">Circle</cvu-button> <br><br> <cvu-button shape="circle" icon="ios-search"></cvu-button> <cvu-button icon="ios-search">Search</cvu-button> <cvu-button shape="circle" icon="ios-search">Search</cvu-button> <cvu-button shape="circle">Circle</cvu-button> ``` 按鈕尺寸 > 按鈕有三種尺寸：大、默認（中）、小。通過設置size為large和small將按鈕設置為大和小尺寸，不設置為默認（中）尺寸。  ```html <cvu-button size="large" type="primary">large</cvu-button> <cvu-button size="default" type="default">default</cvu-button> <cvu-button size="small" type="dashed">small</cvu-button> ``` 長按鈕 > 通過設置屬性 long 可將按鈕寬度設置為 100%，常用于彈窗內操作按鈕。  ```html <cvu-button type="success" long>SUBMIT</cvu-button> <br><br> <cvu-button type="error" long>DELETE</cvu-button> ``` 不可用狀態 > 通過添加disabled屬性可將按鈕設置為不可用狀態。  ```html <cvu-button type="primary">Primary</cvu-button> <cvu-button type="primary" disabled>Primary(Disabled)</cvu-button> ``` 加載按鈕  ```html <cvu-button type="primary">Primary</cvu-button> <cvu-button type="primary" disabled>Primary(Disabled)</cvu-button> <h3>加載按鈕</h3> <cvu-button type="primary" loading>Loading...</cvu-button> <cvu-button type="primary" :loading="loading" @click="toLoading"> <span v-if="!loading">Click me!</span> <span v-else>Loading...</span> </cvu-button> <cvu-button type="primary" :loading="loading2" icon="ios-power" @click="toLoading2"> <span v-if="!loading2">Click me!</span> <span v-else>Loading...</span> </cvu-button> <cvu-button loading shape="circle"></cvu-button> <cvu-button loading shape="circle" type="primary"></cvu-button> ``` 跳轉 > 通過設置 to 可以實現點擊按鈕直接跳轉，支持傳入 vue-router 對象。 > 設置 replace 則不會保存歷史記錄。 > 設置 target，會跟 a 標簽一樣的行為。  ```html <cvu-button to="/modal">Modal</cvu-button> <cvu-button to="/preview" replace>Preview</cvu-button> <cvu-button to="/tree" target="_blank">Tree</cvu-button> ``` 開啟防抖(禁止規定時間內重復點擊) >[info] 設置`is-debounce`屬性為`true`，設置`debounce-time`屬性自定義防抖時間 ```html <cvu-button :is-debounce="true" :debounce-time="2000">防抖</cvu-button> ``` ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | type | 按鈕類型，可選值為`default`、`primary`、`dashed`、`text`、`info`、`success`、`warning`、`error`或者不設置 | String | default | | ghost | 幽靈屬性，使按鈕背景透明 | Boolean | false | | size | 按鈕大小，可選值為`large`、`small`、`default`或者不設置 | String | default | | shape | 按鈕形狀，可選值為`circle`或者不設置 | String | \- | | long | 開啟后，按鈕的長度為 100% | Boolean | false | | html-type | 設置`button`原生的`type`，可選值為`button`、`submit`、`reset` | String | button | | disabled | 設置按鈕為禁用狀態 | Boolean | false | | loading | 設置按鈕為加載中狀態 | Boolean | false | | icon | 設置按鈕的圖標類型 | String | \- | | custom-icon | 設置按鈕的自定義圖標 | String | \- | | to | 跳轉的鏈接，支持 vue-router 對象 | String | Object | \- | | replace | 路由跳轉時，開啟 replace 將不會向 history 添加新記錄 | Boolean | false | | target | 相當于 a 鏈接的 target 屬性 | String | \_self | | append | 同 vue-router append | Boolean | false | | is-debounce | 是否開啟防抖 | Boolean | false | debounce-time | 防抖時間，is-debounce屬性為true時生效 | Number | 1000 | ### events | 事件名 | 說明 | 返回值 | | --- | --- | --- | | click | 按鈕點擊事件 | $el | ### slots | 名稱 | 說明 | | --- | --- | | 無 | 按鈕內容自定義 |