vue如何实现Toast轻提示_vue.js_

vue实现Toast轻提示

首先创建一个toast组件

在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点出来。

上一个：Feign调用传输文件异常

下一个：数据结构——C语言实现带头双向循环链表

热门文章

归纳