vue怎么实现Toast轻提示

这篇文章主要介绍“vue怎么实现Toast轻提示”，在日常操作中，相信很多人在vue怎么实现Toast轻提示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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轻提示”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！