## 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 | 名称 | 说明 | | --- | --- | | 无 | 按钮内容自定义 |