wxc-button

优质

小牛编辑

127浏览

2023-12-01

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

Demo

使用方法

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

<template>
  <wxc-button text="确定"
              @wxcButtonClicked="wxcButtonClicked"></wxc-button>
</template>

<script>
  import { WxcButton } from 'weex-ui'
  export default {
    components: { WxcButton },
    methods: {
      wxcButtonClicked (e) {
        console.log(e)
      }
    }
  }
</script>

更详细代码可以参考这里

可配置参数

Prop	Type	Required	Default	Description
`text`	`String`	`Y`	`-`	展现的文字
`type`	`String`	`N`	`red`	类型：`white`/`red`/`yellow`/`blue`/`green`
`size`	`String`	`N`	`full`	类型：`full`/`big`/`medium`/`small`
`disabled`	`Boolean`	`N`	`false`	是否 disabled（注1）
`isHighlight`	`Boolean`	`N`	`false`	是否高亮显示
`btnStyle`	`Object`	`N`	`{}`	按钮的样式对象（注2）
`textStyle`	`Object`	`N`	`{}`	文字的样式对象（注3）

注1：disabled 样式会覆盖掉默认样式
注2：对默认按钮样式的覆盖全部依赖btnstyle进行，详细样式可以参考 type.js
注2：对默认字体样式的覆盖全部依赖textStyle进行，详细样式可以参考 type.js

事件回调

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