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

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

相关推荐
paopaokaka_luck5 分钟前
绿色环保活动平台(AI问答、WebSocket即时通讯、协同过滤算法、Echarts图形化分析)
java·网络·vue.js·spring boot·websocket·网络协议·架构
前端小巷子31 分钟前
JS打造“九宫格抽奖”
前端·javascript·面试
老华带你飞1 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
Ares-Wang1 小时前
Vue3》》eslint Prettier husky
开发语言·javascript·ecmascript
EveryPossible2 小时前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说2 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
listhi5202 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java2 小时前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
百思可瑞教育6 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋10 小时前
最近一年的感悟
前端·javascript·程序员