vant基础入门按钮样式展示

92 阅读 0 评论 61 点赞

我是靠谱客的博主个性白猫，这篇文章主要介绍vant基础入门按钮样式展示，现在分享给大家，希望可以做个参考。

对于新人官方文档坑太多，写的太囵囤，新手入门还是比较高。

1.说一下半天研究的成果

main.js配置为全局，配置后在任意组件中都可以使用
需要添加样式的，官方文档没有，一顿调试，显示按钮不显示样式
Hello.vue代码
下面代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button><br />
        <van-button loading type="primary" /> &nbsp;
        <van-button loading type="primary" loading-type="spinner" /> &nbsp;
        <van-button loading type="info" loading-text="加载中..." />
    </div>
</template>

<script>
    import Vue from 'vue' ;
   import 'vant/lib/index.css';
    import {Button} from 'vant';
    Vue.use(Button);
    export default {
        name: "hello"
    }
</script>