在 vue2 中使用 vant2 组件库

介绍

Vant 是一个轻量、可靠的移动端组件

一、安装

1.1 通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

1.2 通过 CDN 安装

使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

1.3 通过脚手架安装

在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

在图形化界面中，点击 依赖 -> 安装依赖，然后将 vant 添加到依赖中即可。

二、引入组件

2.1 方式一. 自动按需引入组件 (推荐)

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
import 'vant/lib/button/style';
Vue.use(Button);

2.2 方式二. 手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';
Vue.use(Button);

2.3 方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

三、简单案例

3.1 Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

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

Vue.use(Button);

代码

主要按钮
信息按钮
默认按钮
警告按钮
危险按钮

效果演示

3.2 Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

import Vue from 'vue';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup)

代码

效果演示

3.3 Calendar 日历

介绍

日历组件用于选择日期或日期区间，2.4 版本开始支持此组件。

引入

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

Vue.use(Calendar);

代码

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发 confirm 事件。

export default {
  data() {
    return {
      date: '',
      show: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};

效果演示

3.3 DatetimePicker 时间选择

介绍

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。

引入

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

Vue.use(DatetimePicker);

代码

DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 date 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。

export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
};

效果演示

3.4 PullRefresh 下拉刷新

介绍

用于提供下拉刷新的交互操作。

引入

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

Vue.use(PullRefresh);

代码

下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。

export default {
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
};

效果演示

3.5 Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

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

Vue.use(Circle);

代码

rate 属性表示进度条的目标进度，v-model 表示动画过程中的实时进度。当 rate 发生变化时，v-model 会以 speed 的速度变化，直至达到 rate 设定的值。

export default {
  data() {
    return {
      currentRate: 0,
    };
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
};

效果演示