什么是Vant？

Vant是一个轻量级的、可靠的移动端组件库，于2017年开源。目前Vant官方提供了对Vue 2、Vue 3和微信小程序的支持。

使用npm或yarn包管理工具安装Vant。

# 使用npm包管理工具安装
npm install vant --save
# 使用yarn包管理工具安装
yarn add vant@4.0.0 --save

在src\main.js文件中，导入并挂载Vant模块。

import { createApp } from 'vue'
import './style.css'
import Vant from 'vant'
import 'vant/lib/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(Vant)
app.mount('#app')

Vant中的常用组件

Vant组件库中包含很多组件，由于篇幅有限，仅对Vant组件库中Button组件、Swipe组件、Tab组件、Form组件、Grid组件和Tabbar组件进行讲解。

1. Button组件

Button组件使用<van-button>标签定义，<van-button>标签的常用属性如下表所示。

演示基础的按钮效果

<template>
  <van-button type="primary">主要按钮</van-button>
  <van-button type="success" round>成功按钮</van-button>
  <van-button type="default" disabled>默认按钮</van-button>
  <van-button type="warning" block>警告按钮</van-button>
  <van-button type="danger" plain hairline>危险按钮</van-button>
  <van-button type="danger" loading loading-type="spinner" loading-text="加载中..." />
</template>
<style scoped>
  button{ margin: 3px; }
</style>

演示图标按钮的使用

<template>
  <van-button icon="circle" type="primary">基础图标</van-button>
  <van-button icon="like" type="primary">实底风格</van-button>
  <van-button icon="phone-o" type="primary">线框风格</van-button>
  <van-button :icon="icon">按钮</van-button>
</template>
<script setup>
import icon from '../assets/user-active.png'
</script>
<style>
.van-button { margin: 5px 1px !important; }
</style>

多学一招：按钮尺寸和页面导航使用<van-button>的size属性可以设置按钮的尺寸。size取值分别为large（大型按钮）、normal（普通按钮）、small（小型按钮）和mini（迷你按钮），默认为 normal。

使用<van-button>的url属性和to属性可以实现页面导航，其中，url属性可以进行URL跳转，to属性可以进行路由跳转。

演示按钮尺寸和页面导航效果

<template>
  <van-button type="primary" size="large">大型按钮</van-button>
  <van-button type="primary" size="normal">普通按钮</van-button>
  <van-button type="primary" size="small">小型按钮</van-button>
  <van-button type="primary" size="mini">迷你按钮</van-button>
  <van-button type="primary" url="/test.html">URL跳转</van-button>
  <van-button type="primary" to="目标地址">路由跳转</van-button>
</template>
<style>
.van-button { margin: 5px 1px !important; }
</style>

2. Swipe组件

Vant组件库提供了Swipe组件，用于实现图片轮播效果。轮播图是页面结构中重要的组成部分，常用于网站的首页，主要用于展示页面中的活动信息，让用户不用滚动屏幕就能看到更多内容，可以最大化信息密度。

Swipe组件使用<van-swipe>标签定义，在该标签中使用<van-swipe-item>定义每一张轮播的图片。在<van-swipe>中可以使用autoplay属性设置自动轮播的间隔；当轮播中含有图片时，可以通过lazy-render属性来开启懒加载模式，从而优化网页性能。

<van-swipe>标签的常用属性如下表所示。

演示一种简单的图片轮播效果

<template>
  <van-swipe :autoplay="3000" lazy-render style="width:300px;">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
</template>
<script setup>
const images = [ '/images/01.jpg', '/images/02.jpg', '/images/03.jpg', '/images/04.jpg']
</script>

若想要图片纵向滚动，可以为<van-swipe>标签添加vertical属性，并设置滑块容器的高度，使轮播图片纵向排列。在浏览器中查看图片的纵向滚动如下图所示。

3. Tab组件

Vant组件库提供了Tab组件，用于实现标签页效果。标签页一般出现在页面的顶部或者页面中，用于在不同的内容区域之间进行切换。

Tab组件使用<van-tabs>标签定义，在该标签中使用<van-tab>定义每一个标签项。在<van-tabs>标签中可以使用v-model:active绑定当前激活标签的对应的索引值，默认情况下启用第一个标签，其索引值为0；如果<van-tab>标签中指定了name属性，则v-model:active的值为<van-tab>标签的name，此时无法通过索引值来匹配标签。

<van-tabs>标签的常用属性如下表所示。

演示一种简单的标签页效果

<template>
  <div style="width: 350x; text-align: center;">
    <van-tabs v-model:active="active" swipeable type="card">
      <van-tab title="我是标签1的内容">内容 1</van-tab>
      <!-- 此处省略3个<van-tab></<van-tab>标签 -->
  </div>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

4. Form组件

Vant组件库提供了Form组件，用于数据输入、校验，支持输入框、单选框、复选框等类型。

Form组件使用<van-form>标签定义，该标签需要与<van-field>标签搭配使用，用户可以在输入框内输入或编辑文字。<van-field>标签内可以通过rules属性定义校验规则，通过@submit触发单击事件。

演示一种简单的表单效果

<template>
  <van-nav-bar title="登录组件" />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="username" :rules="[{  }]" />
      <van-field v-model="password" :rules="[{  }]" />
  </van-cell-group>
  <van-button block type="primary" native-type="submit">提交</van-button>
  </van-form>
</template>

单击“提交”按钮后，会进行规则校验，如下图所示。

5. Grid组件

Vant组件库提供了Grid组件，用于实现网格效果，网格可以在水平方向上把页面分隔成等宽度的区块，一般用于同时展示多个同类项目的场景，例如微信支付页面。

Grid组件使用<van-grid>标签定义，在该标签中使用<van-grid-item>作为每一个网格元素的容器。

<van-grid-item>标签的常用属性如下表所示。

演示一种基础的网格效果

<template>
  <van-grid>
    <van-grid-item icon="wap-home-o" text="首页" dot />
    <van-grid-item icon="chat-o" text="聊天" badge="99+" /> 
    <van-grid-item icon="phone-o" text="电话" />
    <van-grid-item icon="user-o" text="我的" />
  </van-grid>
  <!--  见下一页 -->
</template>

实现一行中平均显示3列图片，图片素材从配套源代码中获取。

<van-grid :column-num="3" square :gutter="5">
    <van-grid-item icon="more-o" text="文字">
      <van-image src=" /images/01.jpg" />
    </van-grid-item>
    <van-grid-item icon="more-o" text="文字">
      <van-image src=" /images/02.jpg" />
    </van-grid-item>
    <van-grid-item icon="more-o" text="文字">
      <van-image src=" /images/03.jpg" />
    </van-grid-item>
</van-grid>

若想网格的内容呈横向排列，则可以为<van-grid>标签添加direction属性，将属性值设置为horizontal，网格内容横向排列效果如下图所示。

6. Tabbar组件

Vant组件提供了Tabbar组件，用于在不同页面之间进行切换，常放置在页面的底部。

Tabbar组件使用<van-tabbar>标签定义，在该标签中使用<van-tabbar-item>定义每一个标签项。

<van-tabbar>标签的常用属性如下表所示。

演示一种基础的标签栏效果

<template>
  <van-tabbar v-model="active" fixed active-color="red" inactive-color="blue" :placeholder="true">
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <!-- 此处省略了3个 <van-tabbar-item>标签 -->
  </van-tabbar>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(2)
</script>