Vant 快速上手

基础配置

npm 安装

npm i vant@latest-v2
因为我这里使用的是vue2版本，所以vant也安装的是vant2版本

安装插件

 npm i babel-plugin-import -D

配置规则

在 babel.config.js 中添加如下配置
  plugins: [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }, 'vant']
  ],

进行上面的一些简单配置就可以使用 vant组件库了，下面是使用举例：

简单使用

引入方式

1. 方式1

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

2. 方式2

   import { button } from "vant";
     components: {
       // 需要注册在组件内的，写法为[引入组件名.name]:组件名
       [button.name]: button,
       [rate.name]: rate,
     },
   

3. 引入多个组件时

   // 可以引入多种 vant 组件，逗号隔开
   import { button, rate, Cell, CellGroup } from "vant";
   

Button组件Props

按钮类型

通过设置 type 属性来改变按钮的类型

按钮支持 default、primary、info、warning、danger 五种类型，默认为 default。

它们分别对应的颜色是：白色，绿色，蓝色，橘色，红色

朴素按钮

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

细边框

设置 hairline 属性可以展示 0.5px 的细边框

禁用状态

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

加载状态

通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字

• loading-text 通过该属性设置加载状态下的文字。
• loading-type 通过该属性设置加载图标类型，可选值为 spinner，默认值为circular
• loading-size 通过该属性设置加载图标大小，string类型，20px

按钮形状

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

图标按钮

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

按钮尺寸

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

块级元素

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

页面导航

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

自定义颜色

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

Button组件的Events

click(事件名)

说明：点击按钮，且按钮状态不为加载或禁用时触发

回调参数：event:Event

touchstart(事件名)

说明：开始触摸按钮时触发

回调参数：event:TouchEvent

注意：该事件是手指触摸时调用，所以需要一些特定的条件或设置某些情况来区别单机事件，所以我们使用该事件时要尽量区分开单机事件或机密设计后再使用该事件，它先于点击事件执行。

Button组件的样式变量

组件提供了下列Less变量，可用于自定义样式，使用方法请参考主题定制，这里只列举一些展示

名称：@button-mini-height

默认值：24px

名称：@button-default-background-color

默认值：@white

名称：@button-disabled-opacity

默认值：@disabled-opacity

名称：@button-border-width

默认值：@border-width-base

实例

<template>
  <div class="about">
    <h2测试</h2>
    <div class="first">
      <!-- 类型为info的vanbutton -->
      <van-button
        hairline
        square
        mini
        type="info"
        loading-text="加载中..."
        loading-type="spinner"
        loading-size="25px"
        color="#5462dd"
        icon="https://img01.yzcdn.cn/vant/user-active.png"
        @click="clickButton"
        @touchstart="touch"
        >test
      </van-button>
    </div>
  </div>
</template>
<script>
// 可以引入多种 vant 组件，逗号隔开
import { button} from "vant";
import Vue from "vue";
export default {
  name: "about",
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    clickButton(Event) {
      //   console.log(Event);
      console.log("666");
    },
    touch() {
      console.log("触摸事件以触发");
    },
  },
  components: {
    // 需要注册在组件内的，写法为[引入组件名.name]:组件名
    [button.name]: button,
  },
  created() {
    console.log("可以执行");
  },
};
</script>
<style scoped>
.about {
  text-align: center;
}
</style>

总结：以上效果是 created，touchstart，click的依次执行顺序并输出。

我们也可以了解到在手机端上也可以使用created等钩子函数，并其他data等也同理。