微信小程序 - Vant Weapp UI 框架引入 Toast (轻提示)

悠悠 2023-03-04 08:20 10阅读 0赞

## 前言 ##

官网介绍的不太清楚，这里记录一下。

## 第一步 ##

在所在页面的 `xx.json` 文件中引入，注意路径：

"usingComponents": { 
      "van-toast": "@vant/weapp/toast/index"
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]

## 第二步 ##

在所在页面中 `xx.js` 文件中引入，注意路径！

import Toast from '@vant/weapp/toast/toast';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

## 第三步 ##

在所在页面中 `xx.wxml` 文件中放入以下组件，注意路径！

<van-toast id="van-toast" />

![在这里插入图片描述][20200802174141865.png]

## 第四步 ##

> 具体使用 demo 官网写的很清楚，请移步官网：[https://youzan.github.io/vant-weapp/\#/toast][https_youzan.github.io_vant-weapp_toast]

最后一步，现在就可以使用了！

--------------------

**直接简单使用：**

test: function (){ 
       Toast.success('成功文案');
    }

## 写在后面 ##

如果觉得本文帮助了你，还请高抬贵手赠予 [uh5 项目][uh5] 一个 Star。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230208/063324a9c1684c9ca5e387fc86e88151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/fbdaf0ca073747bdb483496892701019.png
[20200802174141865.png]: /images/20230208/34ecd83f545e422fa29e616bbf9a4e48.png
[https_youzan.github.io_vant-weapp_toast]: https://youzan.github.io/vant-weapp/#/toast
[uh5]: https://gitee.com/wangjiabin-x/uh5