Vant3组件库入门

介绍

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

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

安装组件库

通过npm安装：

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

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

引入组件

1.安装插件

npm i babel-plugin-import -D

2.配置插件

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

3. 引入组件

import { Button } from 'vant';

基础组件

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="加载中..." />

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

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

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

基础用法

通过 name 属性来指定需要使用的图标，Vant 内置了一套图标库（见右侧示例），可以直接传入对应的名称来使用。

<van-icon name="chat-o" />

 

使用图片 URL

你也可以直接在 name 属性中传入一个图片 URL 来作为图标。

<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

徽标提示

设置 dot 属性后，会在图标右上角展示一个小红点；设置 badge 属性后，会在图标右上角展示相应的徽标。

<van-icon name="chat-o" dot />
<van-icon name="chat-o" badge="9" />
<van-icon name="chat-o" badge="99+" />

 

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />