Button 按钮 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

点击后会触发一个操作。

引入方式

数字生活网页应用工程中，不需要 import，直接使用组件标签即可。

import {OkButton} from '@21cnfe/vui'  
Vue.component('OkButton', OkButton)

代码演示

Button 按钮 buttons

按钮类型按钮有五种类型：主按钮、次按钮、实线按钮、危险按钮。

<ok-button type="primary">Primary</ok-button>
<ok-button>default</ok-button>
<ok-button type="ghost">ghost</ok-button>
<ok-button type="warning">warning</ok-button>

不可用状态添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

<ok-button type="primary" disabled>Primary disabled</ok-button>

按钮尺寸按钮有大、中、小三种尺寸。通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

<ok-button type="primary" size="small"></ok-button>
<ok-button type="primary" size="large"></ok-button>

行内按钮添加 inline 属性即可让按钮成为行内按钮

<ok-button type="primary" inline></ok-button>

加载中状态添加 loading 属性即可让按钮处于加载状态。

<ok-button type="primary" loading></ok-button>

图标按钮当需要在 ok-button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 ok-button 内使用 Icon 组件（设置图标位置）。

<ok-button type="primary" icon="check-circle-o"></ok-button>
<ok-button type="primary"><Icon type="check-circle-o"></Icon> icon</ok-button>

按钮自定义样式当需要更改按钮的默认样式时，可以通过 btnStyle 属性设置按钮自定义样式

<template>
  <ok-button type="primary" :btnStyle="btnStyle">custom CSS</ok-button>
</template>
<script>
export default {
  data () {
    return {
      btnStyle: {
        'border-radius': '19px',
        'height': '38px',
        'font-size': '16px',
        'line-height': '38px'
      }
    }
  }
}
</script>

API

属性	说明	类型	默认值
`type`	按钮类型，可选值为`ghost`, `primary`, `warning`, `success`, `danger` 或者为空	String	`--`
`size`	按钮大小，可选值为`small`,`large`,`default`	String	`--`
`loading`	设置按钮载入状态	Boolean	`--`
`disabled`	设置禁用	Boolean	`--`
`inline`	是否设置为行内按钮	Boolean	`false`
`icon`	Icon 组件里内置的某个`icon`的`type`值	String	`--`
`btnStyle`	按钮自定义样式	Object	`--`

Events

事件名称	说明	回调参数
`onClick`	按钮的click点击事件	`--`

1. Button 按钮 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Button 按钮 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

引入方式

代码演示

API

Events

Button 按钮 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用