vue Toast轻提示
如沐春风xsy 人气:2vue实现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点出来。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容