锐客网

  1. 首页 > 睿知 > it技术 > >

使用Vant如何完成各种Toast提示框

目录

  • Vant完成各种Toast提示框
    • 效果展示
  • Vant Toast用法
    • 1.首先引入
    • 2.写事件
    • 3.效果图如下

Vant完成各种Toast提示框
效果展示
使用Vant如何完成各种Toast提示框
文章图片
使用Vant如何完成各种Toast提示框
文章图片
使用Vant如何完成各种Toast提示框
文章图片
使用Vant如何完成各种Toast提示框
文章图片
使用Vant如何完成各种Toast提示框
文章图片
使用Vant如何完成各种Toast提示框
文章图片

（1）使用前的需要安装Vant奥。
（2）在main.js里面引入Toast
import { Toast } from 'vant'; Vue.use(Toast);

（3）在页面使用：（根据步骤代码可以运行奥Toast.vue文件）（上面截图的，在下面代码都有栗子奥）。




【使用Vant如何完成各种Toast提示框】（4）Toast的相关API和Options 点击去查看
更新补充
position 里面的高度不局限与 top bottom等，也可设置数值，例如：
this.$toast({message:'我是需要提示的文字',position:'200px'// 弹框的位置可以自己设置});


Vant Toast用法 题外话就不多讲了，这是围绕vue.js写的，爱上vue.js

1.首先引入
import { Toast } from 'vant'

写个小列子
绑定一个click事件
使用Vant如何完成各种Toast提示框
文章图片


2.写事件
在methods写方法
showToast() {this.$toast({message: "今日签到+3",})},


3.效果图如下
使用Vant如何完成各种Toast提示框
文章图片

一个简单的toast提示成就好了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：投稿|快手还是靠白牌

    下一篇：Android|Android 进入Activity时如何禁止弹出软键盘输入法