JSRUN 用代码说话

Button 按钮

编辑教程

Button 按钮

引入

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型,默认为default

<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>

朴素按钮

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

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

细边框

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

<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>

禁用状态

通过disabled属性来禁用按钮,禁用状态下按钮不可点击

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>

加载状态

通过loading属性设置按钮为加载状态,加载状态下默认会隐藏按钮文字,可以通过loading-text设置加载状态下的文字

<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="info" loading-text="加载中..." />

按钮形状

通过square设置方形按钮,通过round设置圆形按钮

<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>

图标按钮

通过icon属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL

<van-button icon="star-o" type="primary" />
<van-button icon="star-o" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>

按钮尺寸

支持large、normal、small、mini四种尺寸,默认为normal

<van-button type="primary" size="large">大号按钮</van-button>
<van-button type="primary" size="normal">普通按钮</van-button>
<van-button type="primary" size="small">小型按钮</van-button>
<van-button type="primary" size="mini">迷你按钮</van-button>

块级元素

按钮在默认情况下为行内块级元素,通过block属性可以将按钮的元素类型设置为块级元素

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

页面导航

可以通过url属性进行 URL 跳转,或通过to属性进行路由跳转

<van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
<van-button type="primary" to="index">路由跳转</van-button>

自定义颜色

通过color属性可以自定义按钮的颜色

<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>

API

Props

参数 说明 类型 默认值
type 类型,可选值为 primary info warning danger string default
size 尺寸,可选值为 large small mini string normal
text 按钮文字 string -
color v2.1.8 按钮颜色,支持传入linear-gradient渐变色 string -
icon 左侧 图标名称 或图片链接 string -
tag HTML 标签 string button
native-type 原生 button 标签 type 属性 string -
block 是否为块级元素 boolean false
plain 是否为朴素按钮 boolean false
square 是否为方形按钮 boolean false
round 是否为圆形按钮 boolean false
disabled 是否禁用按钮 boolean false
hairline 是否使用 0.5px 边框 boolean false
loading 是否显示为加载状态 boolean false
loading-text 加载状态提示文字 string -
loading-type 加载图标类型,可选值为spinner string circular
loading-size 加载图标大小 string 20px
url 点击后跳转的链接地址 string -
to 点击后跳转的目标路由对象,同 vue-router 的 to 属性 string 丨 object -
replace 是否在跳转时替换当前页面历史 boolean false

Events

事件名 说明 回调参数
click 点击按钮,且按钮状态不为加载或禁用时触发 event: Event
touchstart 开始触摸按钮时触发 event: TouchEvent
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟