Vant基础

一.介绍  

1.Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

2.目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

3.它对我们初学者来说简单快捷体积小，最重要的是它是全中文文档并且有PC端与移动端两个版本

二.快速上手

1.安装

（1）通过 npm 安装

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

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

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

   

当然，你也可以通过 yarn 或 pnpm 进行安装：

# 通过 yarn 安装
yarn add vant

# 通过 pnpm 安装
pnpm add vant

(2)通过 CDN 安装

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

2.引入组件

(1)在 vite 项目中按需引入组件（推荐）

在 vite 项目中使用 Vant 时，推荐安装 vite-plugin-style-import 插件，它可以自动按需引入组件的样式。

A. 安装插件

# 通过 npm 安装
npm i vite-plugin-style-import@1.4.1 -D

# 通过 yarn 安装
yarn add vite-plugin-style-import@1.4.1 -D

# 通过 pnpm 安装
pnpm add vite-plugin-style-import@1.4.1 -D

B. 配置插件

安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

C. 引入组件

完成以上两步，就可以直接使用 Vant 组件了：

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

const app = createApp();
app.use(Button);

Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。

 2.在非 vite 项目中按需引入组件（推荐）

在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装 babel-plugin-import 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。

A. 安装插件

npm i babel-plugin-import -D

B. 配置插件

在.babelrc 或 babel.config.js 中添加配置：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

C. 引入组件

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。

// 原始代码
import { Button } from 'vant';

// 编译后代码
import Button from 'vant/es/button';
import 'vant/es/button/style';

如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

三.基础组件

因为Vant的基础组件太多，作者只在这里列举几个比较用的的组件，如果想要学习其他基础组件这里附上Vant的官网地址Vant 3 - Mobile UI Components built on Vue

1.Button 按钮

介绍

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

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

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

const app = createApp();
app.use(Button);

代码演示

按钮类型

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

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

朴素按钮

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

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="primary">朴素按钮</van-button>

细边框

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

<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="primary">细边框按钮</van-button>

禁用状态

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

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="primary">禁用状态</van-button>

加载状态

通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loading-text 设置加载状态下的文字。

<van-button loading type="primary" />
<van-button loading type="primary" loading-type="spinner" />
<van-button loading type="primary" loading-text="加载中..." />

按钮形状

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

<van-button square type="primary">方形按钮</van-button>
<van-button round type="primary">圆形按钮</van-button>

图标按钮

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

<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button
  icon="https://cdn.jsdelivr.net/npm/@vant/assets/user-active.png"
  type="primary"
>
  按钮
</van-button>

按钮尺寸

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

<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>

块级元素

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

<van-button type="primary" block>块级元素</van-button>

页面导航

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

<van-button type="primary" url="https://github.com">URL 跳转</van-button>
<van-button type="primary" to="index">路由跳转</van-button>

自定义颜色

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

<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
  渐变色按钮
</van-button>

2.Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Popup } from 'vant';

const app = createApp();
app.use(Popup);

代码演示

基础用法

通过 v-model:show 控制弹出层是否展示。

<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model:show="show">内容</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};

弹出位置

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />

关闭图标

设置 closeable 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 close-icon 属性自定义图标，使用 close-icon-position 属性可以自定义图标位置。

<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- 自定义图标 -->
<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- 图标位置 -->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>

圆角弹窗

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。

<van-popup
  v-model:show="show"
  round
  position="bottom"
  :style="{ height: '30%' }"
/>

指定挂载位置

弹出层默认挂载到组件标签所在位置，可以通过 teleport 属性指定挂载位置。

<!-- 挂载到 body 节点下 -->
<van-popup v-model:show="show" teleport="body" />

<!-- 挂载到 #app 节点下 -->
<van-popup v-model:show="show" teleport="#app" />

3.Cell 单元格

介绍

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

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

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

const app = createApp();
app.use(Cell);
app.use(CellGroup);

代码演示

基础用法

Cell 可以单独使用，也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。

<van-cell-group>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 3.1.0 版本开始支持）。

<van-cell-group inset>
  <van-cell title="单元格" value="内容" />
  <van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>

单元格大小

通过 size 属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />
<van-cell title="单元格" value="内容" size="large" label="描述信息" />

展示图标

通过 icon 属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />

只设置 value

只设置 value 时，内容会靠左对齐。

<van-cell value="内容" />

展示箭头

设置 is-link 属性后会在单元格右侧显示箭头，并且可以通过 arrow-direction 属性控制箭头方向。

<van-cell title="单元格" is-link />
<van-cell title="单元格" is-link value="内容" />
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />

页面导航

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

<van-cell title="URL 跳转" is-link url="https://github.com" />
<van-cell title="路由跳转" is-link to="index" />

分组标题

通过 CellGroup 的 title 属性可以指定分组标题。

<van-cell-group title="分组1">
  <van-cell title="单元格" value="内容" />
</van-cell-group>
<van-cell-group title="分组2">
  <van-cell title="单元格" value="内容" />
</van-cell-group>

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" is-link>
  <!-- 使用 title 插槽来自定义标题 -->
  <template #title>
    <span class="custom-title">单元格</span>
    <van-tag type="danger">标签</van-tag>
  </template>
</van-cell>

<van-cell title="单元格" icon="shop-o">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
  <template #right-icon>
    <van-icon name="search" class="search-icon" />
  </template>
</van-cell>

<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
</style>

垂直居中

通过 center 属性可以让 Cell 的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />