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

文章目录

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

Toast 轻提示

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

1. 注册安装 在utils 里面的 vant-ui.js文件中

import { Toast } from 'vant'
Vue.use(Toast)

2. 两种使用方式：

① 导入调用（组件内 或 非组件中都可以）

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

② 通过 this 直接调用（只能在组件内）

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

this.$toast('提示内容')    //必须在组件内使用

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

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

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

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

this.$toast === Toast

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