bz-button 按钮

基本用法

该按钮与 button 组件不同之处在于： button 为小程序原生组件，该 bz-button 独立样式优化，但不建议与内置表单组件混用，其与内置 form 组件无关联性。

扫码预览

用BoosHi扫码或PC端点击

<template>
  <view class="demo-ui-page">
    <view class="demo-content">
      <view class="demo-title">bz-button 按钮</view>
      <demo-cell>
        <bz-button>文字按钮</bz-button>
        <bz-button color="#5d68e8">文字按钮</bz-button>
        <bz-button color="#61d7c6">文字按钮</bz-button>
        <bz-button color="#eeb056">文字按钮</bz-button>
        <bz-button color="#ed6966">文字按钮</bz-button>
      </demo-cell>
      <demo-cell
        title="控制大小"
        subTitle="size= small medium large (默认medium)"
      >
        <bz-button size="small">文字按钮</bz-button>
        <bz-button size="medium">文字按钮</bz-button>
        <bz-button size="large">文字按钮</bz-button>
      </demo-cell>
      <demo-cell
        title="类型"
        subTitle="round block type='default', 'plain', 'text'"
      >
        <bz-button round class="mr-10">圆角按钮</bz-button>
        <bz-button type="plain" class="mr-10">空心按钮</bz-button>
        <bz-button type="text" class="mr-10">文本按钮</bz-button>
        <bz-button block class="mr-10">块级按钮</bz-button>
      </demo-cell>
      <demo-cell title="状态" subTitle="loading disabled">
        <view>
          <bz-button loading class="mr-10">加载按钮</bz-button>
          <bz-button loading class="mr-10" type="plain" color="#ed6966"
            >加载按钮</bz-button
          >
          <bz-button loading type="text">按钮</bz-button>
        </view>
        <view>
          <bz-button disabled class="mr-10">禁用按钮</bz-button>
          <bz-button disabled class="mr-10" type="plain">禁用按钮</bz-button>
        </view>
      </demo-cell>
    </view>
  </view>
</template>

展开 刷新 关闭

属性说明

属性名	类型	默认值	可选值	说明
type	String	'default'	'default', 'plain', 'text'	按钮类型, 1.0.1新增 gray
round	Boolean	false	-	是否为圆角按钮
disabled	Boolean	false	-	是否为禁用
loading	Boolean	false	-	是否为加载状态
size	String	'medium'	'large', 'medium', 'small'	按钮大小
color	String	蓝色	-	主题颜色
styleObj	Object	-	-	自定义样式 style
@click	Handler	-	-	点击回调