Vue 中vant组件开发 Toast轻提示 的使用

文章目录

    • [Toast 轻提示](#Toast 轻提示)

Toast 轻提示

使用vant组件中过的 Toast请提示,用于提示交互

  1. 注册安装 在utils 里面的 vant-ui.js文件中
js 复制代码
import { Toast } from 'vant'
Vue.use(Toast)
  1. 两种使用方式:

① 导入调用(组件内 或 非组件中都可以)

js 复制代码
import { Toast } from 'vant'
Toast('获取图形验证码成功')

② 通过 this 直接调用(只能在组件内)

本质就是将:方法注册挂载到了Vue原型上 Vue.Prototype.$toast = XXX

js 复制代码
this.$toast('提示内容')    //必须在组件内使用

注意:主要的是阅读文档,语法不懂就看即可,就是改改内容

例如:我需要自定义icon图片提示

js 复制代码
this.$toast({
  message: '自定义图片',
  icon: 'https://img01.yzcdn.cn/vant/logo.png',
});

导入了:import { Toast } from 'vant'后

this.$toast === Toast

使用场景:就看我们是否在组件中,不在则使用第二种,有则使用第一种。

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode9 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis