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