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

目录

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

Vant完成各种Toast提示框

效果展示

（1）使用前的需要安装Vant奥。 

（2）在main.js里面引入Toast

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

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

  

（4）Toast的相关API和Options 点击去查看

更新补充

position 里面的高度不局限与 top bottom等，也可设置数值，例如： 

this.$toast({
    message:'我是需要提示的文字',
    position:'200px'   // 弹框的位置可以自己设置
});

Vant Toast用法

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

1.首先引入

import { Toast } from 'vant'

写个小列子

绑定一个click事件

2.写事件

在methods写方法

showToast() {
                this.$toast({
                    message: "今日签到+3",
                  })
      },

3.效果图如下

一个简单的toast提示成就好了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。