Button 按钮

按钮类型

<vz-button type="primary">主要按钮</vz-button>

<vz-button type="success">成功按钮</vz-button>

<vz-button type="warning">警告按钮</vz-button>

<vz-button type="danger">危险按钮</vz-button>

<vz-button type="info">信息按钮</vz-button>

镂空按钮

<vz-button type="primary" plain>主要按钮</vz-button>

<vz-button type="success" plain>成功按钮</vz-button>

<vz-button type="warning" plain>警告按钮</vz-button>

<vz-button type="danger" plain>危险按钮</vz-button>

<vz-button type="info" plain>信息按钮</vz-button>

按钮形状

<vz-button type="primary" square>方形按钮</vz-button>

<vz-button type="success" round plain>圆形按钮</vz-button>

禁用状态

<vz-button disabled>禁用状态</vz-button>

<vz-button type="success" disabled plain>禁用状态</vz-button>

加载状态

<vz-button loading loading-text="加载中...">加载状态</vz-button>

<vz-button type="success" loading loading-name="spinner" loading-text="加载中..." plain>加载状态</vz-button>

图标按钮

<vz-button icon="vz-icon-home">按钮</vz-button>

<vz-button type="success" plain icon="vz-icon-home"></vz-button>

<vz-button icon="vz-icon-home" circle></vz-button>

自定义颜色

<vz-button color="violet">单色按钮</vz-button>

<vz-button plain color="teal">单色按钮</vz-button>

<vz-button color="linear-gradient(to right, teal, violet)">渐变色按钮</vz-button>

<vz-button disabled color="violet">单色按钮</vz-button>

<vz-button disabled plain color="teal">单色按钮</vz-button>

<vz-button disabled color="linear-gradient(to right, teal, violet)">渐变色按钮</vz-button>

<vz-button loading loading-text="加载中" color="violet">单色按钮</vz-button>

<vz-button loading loading-text="加载中" plain color="teal">单色按钮</vz-button>

<vz-button loading loading-text="加载中" color="linear-gradient(to right, teal, violet)">渐变色按钮</vz-button>

自定义尺寸

<vz-button type="primary" block>块级元素</vz-button>

<vz-button type="success" width="80%" height="100rpx" block>自定义尺寸</vz-button>

<vz-button type="primary">普通按钮</vz-button>

<vz-button type="success" height="50" px="10">小型按钮</vz-button>

<vz-button type="danger" height="40" px="6" text-size="12px">迷你按钮</vz-button>

Props

属性名	说明	类型	默认值
type	按钮类型	primary / success / danger / warning / info	primary
block	是否为块级元素	boolean	false
color	按钮颜色	string	-
plain	是否为镂空按钮	boolean	false
square	是否为方角按钮	boolean	false
round	是否为圆角按钮	boolean	false
circle	是否为圆形按钮（为 true 时文本不显示）	boolean	false
px	左右边距（padding-x）	string / number	20rpx
width	宽（块级元素默认 100%）	string / number	auto
height	高	string / number	--vz-height-base
icon	按钮的图标	string	-
text-size	图标与文字大小	string / number	--vz-font-size-base
gap	图标与文字之间的间距	string / number	--vz-gap-base
disabled	是否为禁用状态	boolean	false
loading	是否为加载中状态	boolean	false
loading-name	加载中图标	circular / spinner / icon	-
loading-text	加载中文案	string	-
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.StyleValue	-

uniapp

Events

事件名	说明	参数
click	点击事件	-

Slots

插槽名	说明
default	按钮内容

CSS

变量名	说明	默认值
--vz-button-px	props.px	20rpx
--vz-button-width	props.width	-
--vz-button-height	props.height	--vz-height-base
--vz-button-text-size	props.textSize	--vz-font-size-base
--vz-button-gap	props.gap	--vz-gap-base
--vz-button-font-weight	文字加粗	500
--vz-button-radius	圆角	--vz-border-radius-base

SCSS

$button: (
  "px": 20rpx,
  "height": var(--vz-height-base),
  "border": var(--vz-border),
  "radius": var(--vz-border-radius-base),
  "font-weight": 500,
  "text-size": var(--vz-font-size-base),
  "gap": var(--vz-gap-base),
);