lighting-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
52 lines (40 loc) • 1.93 kB
Markdown
# lc-button
> Weex 按钮组件，支持 4 种基本类型 button，可自定义样式
## [Demo](https://h5.m.taobao.com/trip/wx-detection-demo/button/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwx-detection-demo%2Fbutton%2Findex.weex.js)
<img src="https://img.alicdn.com/tfs/TB1aMRGhgvD8KJjy0FlXXagBFXa-562-1000.gif" width="240"/> <img src="https://img.alicdn.com/tfs/TB1b0tMhf6H8KJjy0FjXXaXepXa-200-200.png" width="160"/>
## 使用方法
```vue
<template>
<lc-button text="确定"
type="fliggy"
@LcButtonClicked="LcButtonClicked"></lc-button>
</template>
<script>
import { LcButton } from 'weex-ui'
export default {
components: { LcButton },
methods: {
LcButtonClicked (e) {
console.log(e)
}
}
}
</script>
```
更详细代码可以参考 [这里](https://github.com/alibaba/weex-ui/blob/master/button/loading/index.vue)
### 可配置参数
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`text`** | `string` | `Y` | `-` | 展现的文字 |
| **`type`** | `enum` | `N` | `red` | 类型：`normal`/ `highlight`/`red`/`yellow` |
| **`disabled`** | `bool` | `N` | `false` | 是否 disabled（注1） |
| **`btnStyle`** | `object` | `N` | `{}` | 按钮的样式对象（注2） |
| **`textStyle`** | `object` | `N` | `{}` | 文字的样式对象（注3） |
- 注1：disabled 样式会覆盖掉默认样式
- 注2：对默认按钮样式的覆盖全部依赖btnStyle进行，详细样式可以参考 [type.js](https://github.com/alibaba/weex-ui/blob/master/packages/lc-button/type.js)
- 注2：对默认字体样式的覆盖全部依赖textStyle进行，详细样式可以参考 [type.js](https://github.com/alibaba/weex-ui/blob/master/packages/lc-button/type.js)
### 事件回调
```
// `@LcButtonClicked="LcButtonClicked"`
将会返回 e, type, disabled
```