Button 按钮

引入

  1. import{Button}from'vant';
  2. Vue.use(Button);

代码演示

按钮类型

支持defaultprimaryinfowarningdanger五种类型,默认为default

  1. <van-buttontype="default">默认按钮</van-button>
  2. <van-buttontype="primary">主要按钮</van-button>
  3. <van-buttontype="info">信息按钮</van-button>
  4. <van-buttontype="warning">警告按钮</van-button>
  5. <van-buttontype="danger">危险按钮</van-button>

朴素按钮

通过plain属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

  1. <van-buttonplaintype="primary">朴素按钮</van-button>
  2. <van-buttonplaintype="danger">朴素按钮</van-button>

细边框

设置hairline属性可以开启 0.5px 边框,基于伪类实现

  1. <van-buttonplainhairlinetype="primary">细边框按钮</van-button>
  2. <van-buttonplainhairlinetype="danger">细边框按钮</van-button>

禁用状态

通过disabled属性来禁用按钮,此时按钮不可点击

  1. <van-buttondisabledtype="primary">禁用状态</van-button>
  2. <van-buttondisabledtype="danger">禁用状态</van-button>

加载状态

  1. <van-buttonloadingtype="primary"/>
  2. <van-button
  3. loading
  4. type="danger"
  5. loading-type="spinner"
  6. loading-text="加载中..."
  7. />

按钮形状

  1. <van-buttonsquaretype="primary">方形按钮</van-button>
  2. <van-buttonroundtype="danger">圆形按钮</van-button>

图标按钮

  1. <van-buttonicon="star-o"type="primary"/>
  2. <van-buttonicon="star-o"type="danger">按钮</van-button>

按钮尺寸

支持largenormalsmallmini四种尺寸,默认为normal

  1. <van-buttontype="primary"size="large">大号按钮</van-button>
  2. <van-buttontype="primary"size="normal">普通按钮</van-button>
  3. <van-buttontype="primary"size="small">小型按钮</van-button>
  4. <van-buttontype="primary"size="mini">迷你按钮</van-button>

API

Props

参数说明类型默认值版本
type类型,可选值为 primaryinfowarningdangerStringdefault1.6.6
size尺寸,可选值为 largesmallminiStringnormal-
text按钮文字String--
icon左侧图标名称或图片链接,可选值见 Icon 组件String-2.0.0
tagHTML 标签Stringbutton-
native-type原生 button 标签 type 属性String--
block是否为块级元素Booleanfalse-
plain是否为朴素按钮Booleanfalse1.1.13
square是否为方形按钮Booleanfalse1.2.0
round是否为圆形按钮Booleanfalse1.3.4
disabled是否禁用按钮Booleanfalse-
hairline是否使用 0.5px 边框Booleanfalse1.6.11
loading是否显示为加载状态Booleanfalse-
loading-text加载状态提示文字String-1.6.3
loading-type加载图标类型,可选值为spinnerStringcircular2.0.0
loading-size加载图标大小String20px1.6.7
url跳转链接String-1.6.5
to路由跳转对象,同 vue-router 的 toString | Object-1.6.5
replace跳转时是否替换当前页面历史Booleanfalse1.6.5

Events

事件名说明回调参数
click点击按钮,且按钮状态不为加载或禁用时触发event: Event
touchstart原生 touchstart 事件event: TouchEvent

Button 按钮 - 图1