vant弹出框的使用,vant tabs显示内容
本文主要介绍如何使用Vant完成各种吐司提示框，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
Vant完成各种Toast提示框效果并显示Vant Toast用法1。先介绍2。写事件3。效果图如下
Vant完成各种Toast提示框
效果展示
(1)使用前应安装Vant。
(2)将Toast引入main.js
从“vant”导入{ Toast }；
Vue.use(吐司)；
(3)在页面上使用：(可以根据步骤代码运行Toast.vue文件)(上面截图，下面代码都有栗子aos)。
模板
！-烤面包技巧-
div id=toast
van-button plain type= primary @ click= to toast 纯文本提示/van-button
van-button plain type= primary @ click= to loading 装载圆形提示/van-button
van-button plain type= primary @ click= to success tip 成功提示/van-button
van-button plain type= primary @ click= to fail tip 失败提示/van-button
van-button plain type= primary @ click= to custom icon 自定义图标提示/van-button
van-button plain type= primary @ click= to custom image 自定义图片提示/van-button
/div
/模板
脚本
导出默认值{
data() {
返回{
邮件：“”
}
},
//Toast组件引入后，会自动在Vue的原型上挂载$toast方法，方便在组件内调用。
方法：{
//普通文本提示
toToast() {
这个。$toast({
信息：“我是需要提示的文本”，
位置：“顶部”
});
},
//加载圆提示
toLoading() {
这个。$toast.loading({
面具：真的，
消息：“正在加载.”
});
},
//成功提示
toSuccessTip() {
这个。$toast.success({
消息：“成功提示复制”，
})
},
//失败提示
toFailTip() {
这个。$toast.fail({
消息：“提示复制失败”
})
},
//自定义图标
toCustomIcon() {
这个。$toast({
图标： star-o ，//找到你需要的图标
消息：“我是提示文本”
})
},
//自定义图片提示
toCustomImage() {
这个。$toast({
图标： https://www.baidu.com/favicon.ico ，
消息：“我是提示文本”
})
}
},
已安装(){
}
}
/脚本
风格
/风格
(4)点击4)Toast的相关API和选项进行查看。
更新补充
位置内部的高度不限于顶部底部等。您还可以设置值，例如：
这个。$toast({
信息：“我是需要提示的文本”，
位置： 200px //子弹盒的位置可以自己设置
});
Vant Toast用法
我就不说题外话了。这是围绕Vue.js写的，我爱上了Vue.js。
1.首先引入
从“vant”导入{ Toast }
写个小列子
绑定一个点击事件
2.写事件
方法中的写作方法
showToast() {
这个。$toast({
消息：“今天签到3个”，
})
},
3.效果图如下
简单的吐司提示就完成了。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。