2023-02-13_有赞小程序UI框架之vant-button

前言

• Button 按钮，这个不用多说。。看看vant-button的效果。比默认的漂亮多了。

image.png image.png

1. 引入

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

2. 按钮风格

• 支持default、primary、info、warning、danger等按钮五种类型，默认为default
• 支持朴素按钮、圆角按钮、边框、禁用状态、icon等，详细见官方api

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

3. 示例

<van-button block type="info" round bindtap="scanPrinter">连接打印机</van-button>

参考文章

1. Button 按钮