当前位置：首页>移动开发>正文

vant 项目demo vant入门

移动开发2024-05-14 21:57:20

一.介绍

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="描述信息" />

查看全文

https://www.xamrdz.com/mobile/4sk1957409.html

一.介绍

二.快速上手

1.安装

（1）通过 npm 安装

(2)通过 CDN 安装

2.引入组件

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

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

三.基础组件

1.Button 按钮

介绍

引入

代码演示

按钮类型

朴素按钮

细边框

禁用状态

加载状态

按钮形状

图标按钮

按钮尺寸

块级元素

页面导航

自定义颜色

2.Popup 弹出层

介绍

引入

代码演示

基础用法

弹出位置

关闭图标

圆角弹窗

指定挂载位置

3.Cell 单元格

介绍

引入

代码演示

基础用法

卡片风格

单元格大小

展示图标

只设置 value

展示箭头

页面导航

分组标题

使用插槽

垂直居中

相关文章：