这篇文章主要讲解了“vue实现Toast轻提示的方法及过程是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

vue实现Toast轻提示

首先创建一个toast组件

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

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

</script>
<style lang="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文件中引入组件

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

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

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

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

but() {
 this.$Toast("Are you ok ?");
},

效果图

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

使用vant的Toast轻提示报错

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

文档中是这样写的

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

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

实际使用是这样写

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

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

“vue实现Toast轻提示的方法及过程是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注博信网站，小编每天都会为大家更新不同的知识。