import Vue from 'vue '；
import { Button } from 'vant '；
VUE.USE(Button )；
代码演示
按钮类型
支持五种类型的默认、主、信息、警告和警告，默认值为默认按钮
主按钮
消息按钮
警告按钮
危险按钮
朴素的按钮
在plain属性中将按钮设置为朴素的按钮。 朴素的按钮文字是按钮的颜色，背景是白色。 朴素的按钮
朴素的按钮
纤细的边框
设置hairline属性将打开0.5px边框，并基于伪类实现细边框按钮
细边框按钮
无效状态
不能在disabled属性中禁用按钮，并在禁用状态下单击按钮将其禁用
无效状态
加载状态
如果在loading属性中将按钮设置为加载状态，则在加载状态下将默认隐藏按钮字符，并且可以在loading-text中设置加载状态字符
按钮形状
在square中设定方形按钮，在round中设定圆形按钮的方形按钮
圆形按钮
选项卡页面上创建或编辑条目
还可以通过在icon属性中设置按钮图标来支持icon组件中的所有图标，并传递图标URL
按钮
按钮
按钮大小
支持large、normal、small、mini四种大小，默认为normal大按钮
普通按钮
小型按钮
迷你按钮
块级元素
按钮缺省为内联块级元素，您可以使用block属性将按钮的元素类型设置为块级元素块级元素
页面导航
可以通过url属性进行url跳转，也可以通过to属性进行路由url跳转
路由跳转
定制颜色
color属性允许您自定义按钮颜色的单色按钮
黑白按钮
渐变按钮
API
Props参数说明类型默认值type类型，可选值为primaryinfowarningdangerstringdefault
size大小，选项值为largesmallministringnormal
文本按钮字符string-
colorv2.1.8按钮颜色，线性渐变字符串-
icon左图标名称或图像链接字符串-
tagHTML标记stringbutton
native-type本机button标记type属性string-
块是否为块级元素布尔型假
plain是否为朴素的按钮布尔假
square是否为方形按钮布尔假
round是否为圆形按钮布尔假
禁用是否禁用按钮布尔假
hairline是否使用0.5px边框假
加载是否显示为加载状态的布尔假
加载-文本加载状态提示文本字符串-
加载类型加载图标类型，选项值为spinnerstringcircular
加载大小加载图标大小string20px
url单击可跳转到的链接目标string-
to单击后，跳转目标的路由对象为vue-router的to属性string | object-
replace是否要在跳转时替换当前的页面历史记录booleanfalse
Events事件名称说明回调参数click单击按钮，并在按钮状态未加载或禁用时调用event: Event
touchstart开始触摸按钮时触发事件： touch事件
以下是一个简单的例子。
w3cschool(w3cschool.cn )按钮类型
主按钮
消息按钮
默认按钮
危险按钮
警告按钮
朴素的按钮
朴素的按钮
朴素的按钮
纤细的边框
细边框按钮
细边框按钮
无效状态
无效状态
无效状态
加载状态
按钮形状
方形按钮
圆形按钮
var app=new Vue({ (
El : ' # APP '，
数据： {
(，
methods: {
(，
created () }
(，
() )