wxc-button

Weex 按钮组件，支持 4 种基本类型 button，可自定义样式

Demo

wxc-button 按钮 - 图1 wxc-button 按钮 - 图2

使用方法

在 weex-ui 0.6.0 版本以上，我们对 type api 有对应修改，同时新增 size api 用于设置大小。

  1. <template>
  2.   <wxc-button text="确定"
  3.               @wxcButtonClicked="wxcButtonClicked"></wxc-button>
  4. </template>
  6. <script>
  7.   import { WxcButton } from 'weex-ui'
  8.   export default {
  9.     components: { WxcButton },
  10.     methods: {
  11.       wxcButtonClicked (e) {
  12.         console.log(e)
  13.       }
  14.     }
  15.   }
  16. </script>

更详细代码可以参考 这里

可配置参数

Prop Type Required Default Description
text String Y - 展现的文字
type String N red 类型：white/red/yellow/blue
size String N full 类型：full/big/medium/small
disabled Boolean N false 是否 disabled（注1）
btnStyle Object N {} 按钮的样式对象（注2）
textStyle Object N {} 文字的样式对象（注3）
  • 注1：disabled 样式会覆盖掉默认样式
  • 注2：对默认按钮样式的覆盖全部依赖btnstyle进行，详细样式可以参考 type.js
  • 注2：对默认字体样式的覆盖全部依赖textStyle进行，详细样式可以参考 type.js

事件回调

  1. // `@wxcButtonClicked="wxcButtonClicked"`
  2. 将会返回 e, type, disabled

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/