vue怎么实现Toast轻提示

vue怎么实现Toast轻提示

这篇文章主要介绍“vue怎么实现Toast轻提示”,在日常操作中,相信很多人在vue怎么实现Toast轻提示问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么实现Toast轻提示”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue实现Toast轻提示

首先创建一个toast组件

<template><divclass="context"v-show="isshow"><spanclass="tip">{{text}}</span></div></template>

<script>exportdefault{name:"Toast",props:{isshow:{type:Boolean,},text:{type:String,},},watch:{isshow(val){if(val===true){setTimeout(()=>{this.isshow=false;},3000);}},},};

</script><stylelang="less"scoped>.context{position:absolute;top:0;width:100%;height:100%;z-index:100;display:flex;justify-content:center;align-items:center;.tip{background-color:rgba(40,40,40,0.8);color:aliceblue;font-size:0.6rem;padding:0.2rem;border-radius:0.1rem;}}</style>

在js文件中引入组件

importToastfrom"./Toast.vue";letNewToast={install:function(Vue){//创建vue插件,官方地址https://cn.vuejs.org/v2/guide/plugins.htmlletnewToast=Vue.extend(Toast);//创建vue构造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extendlettoast=newnewToast();//创建实例document.body.appendChild(toast.$mount().$el);//挂载Vue.prototype.$Toast=function(text){toast.isshow=true;//传入propstoast.text=text;//传入props};},};export{NewToast};

在入口文件中引入上面这个js文件

import{NewToast}from"@/components/index.js";Vue.use(NewToast);

下面就可以在view里全局使用了

but(){this.$Toast("Areyouok?");},

效果图

这样一个简单的轻提示就好了,觉得样式丑的话,可以自己调一下。

使用vant的Toast轻提示报错

记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了。

文档中是这样写的

Toast.success('成功文案');Toast.fail('失败文案');

main.js中引用vant后直接调用Toast报错。

实际使用是这样写

this.$toast.success("成功文案");this.$toast.fail("失败文案");

和调用路由一样需要this点出来。

到此,关于“vue怎么实现Toast轻提示”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注恰卡编程网网站,小编会继续努力为大家带来更多实用的文章!

发布于 2022-04-11 21:19:14
收藏
分享
海报
0 条评论
29
上一篇:Java带返回值的方法怎么定义和调用 下一篇:Java方法的定义与调用是什么
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码