Vue学习笔记集--Vant-ui

最新推荐文章于 2025-04-02 10:16:04 发布

Three～stone

最新推荐文章于 2025-04-02 10:16:04 发布

阅读量678

点赞数 28

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/2301_80158456/article/details/146448251

版权

Vant-ui

封装了很多组件

官网：

Vant 2 - 轻量、可靠的移动端组件库

使用步骤：

1、在项目里安装vant

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

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

2、引入组件

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

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

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

Webpack和Babel的区别

以下是 Webpack 和 Babel 的主要区别：

特性	Webpack	Babel
类型	模块打包工具（Module Bundler）	JavaScript 编译器（JavaScript Compiler）
主要功能	打包、代码分割、加载器、插件、开发服务器	语法转换、polyfills、插件和预设
执行方式	通过 `store.commit` 提交	通过 `store.getters` 访问
是否支持异步	支持异步操作	支持异步操作
是否修改 state	是，唯一可以修改 state 的方式	否，只是读取和派生 state
使用场景	需要修改状态的场景	需要从状态派生新数据的场景

Webpack

模块打包工具：Webpack 是一个模块打包工具，它将多个模块和资源文件打包成一个或多个输出文件。支持 JavaScript、CSS、图片、字体等各种类型的文件。
代码分割：通过代码分割和懒加载，优化应用的性能。
加载器（Loaders）：使用加载器将非 JavaScript 文件（如 CSS、图片、TypeScript、Less 等）转换为模块。
插件（Plugins）：使用插件扩展 Webpack 的功能，如压缩代码、注入环境变量、优化构建流程等。
开发服务器：提供开发服务器和热模块替换功能，提升开发体验。

Babel

JavaScript 编译器：Babel 是一个 JavaScript 编译器，它允许你使用最新的 JavaScript 语法特性来编写代码，然后通过编译将这些代码转换为广泛兼容的 JavaScript 版本（通常是 ES5），这样你的代码就可以在当前和旧版浏览器上运行。
语法转换：将 ES6+ 语法转换为 ES5，使得代码能够在不支持新语法的旧浏览器上运行。
Polyfills：通过核心库（如 core-js）注入缺失的 JavaScript 特性，使得可以使用新的语言特性而不牺牲兼容性。
插件和预设：使用插件和预设来定义具体的转换规则，例如将 ES6 转换为 ES5。

总结

Webpack：模块打包工具，主要用于打包和优化各种类型的资源文件。
Babel：JavaScript 编译器，主要用于将现代 JavaScript 语法转换为兼容性更好的旧版本代码。

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

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

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件

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

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

Vue.use(Vant);

Tips: 配置按需引入后，将不允许直接导入所有组件。

Toast轻提示

Vant的Toast轻提示组件是一个轻量级的提示组件，用于在页面中间弹出黑色半透明提示，适用于消息通知、加载提示、操作结果提示等场景。以下是使用Toast组件的详细方法：

引入组件

全局引入

在项目的入口文件中，通过以下方式全局注册Toast组件，这样可以在所有组件中使用Toast：

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

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

按需引入

如果项目中使用了unplugin-vue-components插件，可以在需要使用Toast的组件中按需引入，无需全局注册：

import { showToast } from 'vant';

组件内调用

引入Toast组件后，会自动在Vue的prototype上挂载$toast方法，便于在组件内调用：

export default {
  mounted() {
    this.$toast('提示文案');
  },
};

基本使用

文字提示

直接调用Toast方法，传入提示文案即可：

Toast('提示内容');

加载提示

使用Toast.loading方法展示加载提示，可以通过forbidClick属性禁用背景点击：

Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

成功/失败提示

使用Toast.success和Toast.fail方法分别展示成功和失败提示：

Toast.success('操作成功');
Toast.fail('操作失败');

高级用法

自定义图标

通过icon选项可以自定义图标，支持传入图标名称或图片链接：

Toast({
  message: '自定义图标',
  icon: 'like-o',
});

Toast({
  message: '展示图片',
  icon: 'https://img01.yzcdn.cn/vant/logo.png',
});

自定义位置

默认情况下，Toast会显示在屏幕正中位置，通过position属性可以控制Toast展示的位置：

Toast({
  message: '顶部展示',
  position: 'top',
});

Toast({
  message: '底部展示',
  position: 'bottom',
});

动态更新提示

执行Toast方法时会返回对应的Toast实例，通过修改实例上的message属性可以实现动态更新提示的效果：

const toast = Toast.loading({
  duration: 0, // 持续展示 toast
  forbidClick: true,
  message: '倒计时 3 秒',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = `倒计时 ${second} 秒`;
  } else {
    clearInterval(timer);
    Toast.clear();
  }
}, 1000);

修改默认配置

通过Toast.setDefaultOptions函数可以全局修改Toast的默认配置：

// 将所有 Toast 的展示时长设置为 2000 毫秒
Toast.setDefaultOptions({ duration: 2000 });

// 将所有 loading Toast 设置为背景不可点击
Toast.setDefaultOptions('loading', { forbidClick: true });

注意事项

Toast组件是以函数形式提供的，如果项目中使用unplugin-vue-components插件来自动引入组件样式，则需要手动引入Toast组件的样式：

import 'vant/es/toast/style';

Toast默认采用单例模式，即同一时间只会存在一个Toast。如果需要在同一时间弹出多个Toast，可以调用Toast.allowMultiple方法。

组件引入

在使用 Vant 组件库时，有些组件需要在组件内导入，而有些不需要，这主要是由于以下原因：

组件的引入方式

按需引入：Vant 支持按需引入组件，这种方式可以减少打包体积，提升项目性能。通过使用 unplugin-vue-components 插件，可以在 Vue 文件中自动引入组件，无需手动编写 import 语句。例如，在 Vite 项目中配置插件后，直接在模板中使用组件即可，插件会自动识别并引入所需的组件。
全局引入：也可以选择全局引入所有 Vant 组件，在 main.js 中一次性导入所有组件并挂载到 Vue 实例上。这种方式简单直接，但会增加代码包体积，因此不推荐。

组件的类型

函数式组件：Vant 中的 Toast、Dialog、Notify 和 ImagePreview 等组件是函数式组件，需要手动导入后使用，并且要引入组件样式。例如，使用 Toast 组件时，需要在组件内导入 showToast 函数，并引入对应的样式文件。
其他组件：对于非函数式组件，如果使用了按需引入插件，则无需在组件内手动导入，插件会自动处理组件的引入和注册。

构建工具和插件的配置

插件配置：如果项目中正确配置了 unplugin-vue-components 插件，并使用了 VantResolver 解析器，那么大多数组件可以自动按需引入，无需手动导入。
Babel 插件：在某些情况下，项目可能使用了 babel-plugin-import 插件来实现按需加载。如果该插件配置正确，也可以自动引入组件，无需手动导入。但如果配置有误，可能会导致组件无法正确引入，需要手动导入。