## Button 按钮 ### 使用指南 如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。 #### 全局注册 你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了： ```js import Vue from 'vue'; import { Button } from '@youzan/zanui-vue'; import '@youzan/zanui-vue/lib/zanui-css/button.css'; Vue.component(Button.name, Button); ``` #### 局部注册 如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`： ```js import { Button } from '@youzan/zanui-vue'; export default { components: { 'zan-button': Button } }; ``` ### 代码演示 #### 按钮功能 只接受`primary`, `default`, `danger`三种类型，默认`default`。 :::demo 按钮功能 ```html default primary danger ``` ::: #### 禁用状态 在组件上加上`disabled`属性即可，此时按钮不可点击。 :::demo 禁用状态 ```html diabled ``` ::: #### 按钮尺寸 只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。 :::demo 按钮尺寸 ```html large normal small mini ``` ::: #### 自定义按钮标签 按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。 :::demo 自定义按钮标签 ```html a标签按钮 ``` ::: #### loading按钮 `loading`状态的按钮。 :::demo loading按钮 ```html loading ``` ::: #### 页面底部操作按钮 一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。 :::demo ```html 立即购买 加入购物车 立即购买 ``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | type | 按钮类型 | `string` | `default` | `primary`, `danger` | | size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` | | tag | 按钮标签 | `string` | `button` | `a`, `span`, ... | | diabled | 按钮是否禁用 | `boolean` | `false` | | | block | 按钮是否显示为块级元素 | `boolean` | `false` | | | bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | |