vant表单按钮置灰_VantButton按钮
引⼊import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
代码演⽰
按钮类型
⽀持default、primary、info、warning、danger五种类型，默认为default默认按钮
主要按钮
信息按钮
警告按钮
危险按钮
朴素按钮
通过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类型，可选值为 primary info warning dangerstringdefault size尺⼨，可选值为 large small ministringnormal
text按钮⽂字string-
color v2.1.8按钮颜⾊，⽀持传⼊linear-gradient渐变⾊string-
icon左侧 图标名称 或图⽚链接string-
tagHTML 标签stringbutton
native-type原⽣ button 标签 type 属性string-
block是否为块级元素booleanfalse
plain是否为朴素按钮booleanfalse
square是否为⽅形按钮booleanfalse
round是否为圆形按钮booleanfalse
disabled是否禁⽤按钮booleanfalse
hairline是否使⽤ 0.5px 边框booleanfalse
loading是否显⽰为加载状态booleanfalse
loading-text加载状态提⽰⽂字string-改变button按钮的形状
loading-type加载图标类型，可选值为spinnerstringcircular
loading-size加载图标⼤⼩string20px
url点击后跳转的链接地址string-
to点击后跳转的⽬标路由对象，同 vue-router 的 to 属性string | object-
replace是否在跳转时替换当前页⾯历史booleanfalse
Events事件名说明回调参数click点击按钮，且按钮状态不为加载或禁⽤时触发event: Event touchstart开始触摸按钮时触发event: TouchEvent
以下是⼀个简单⽰例：
W3Cschool(w3cschool)
主要按钮
信息按钮
默认按钮
危险按钮
警告按钮
朴素按钮
朴素按钮
朴素按钮
细边框
细边框按钮
细边框按钮
禁⽤状态
禁⽤状态
禁⽤状态
加载状态
按钮形状
⽅形按钮
圆形按钮
var app = new Vue({ el: '#app',
data: {
},
methods: {
},
created() {
},
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。