点击后会触发一个操作。
引入方式
数字生活小程序工程中，不需要 import，直接使用组件标签即可。
import {OkButton} from '@21cnfe/vui'
Vue.component('OkButton', OkButton)
|
代码演示
按钮类型
按钮有五种类型：主按钮、次按钮、实线按钮、危险按钮。
<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点击事件 |
-- |
