<style> .vue-toast { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, 0.3); } .vue-tip { position: fixed; left: 50%; width: 100px; line-height: 40px; padding: 0 10px; margin-left: -60px; text-align: center; z-index: 9999; font-size: 14px; color: #fff; border-radius: 5px; background-color: rgba(0, 0, 0, .7); } .vue-tip.tip-center { top: 50%; } .vue-tip.tip-bottom { bottom: 50px; } .vue-tip.tip-top { top: 50px; } .fadeIn { animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: .5s; -webkit-animation-duration: .5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } </style>var Toast = {}; //避免重复install，设立flag Toast.installed = false; Toast.install = function(Vue, options) { if(Toast.installed) return; let opt = { // 默认显示位置 defaultType: "center", // 默认持续时间 duration: "3000" } // 使用options的配置 for(let i in options) { opt[i] = options[i] } Vue.prototype.$toast = (toast, type) => { // 如果有传type，位置则设为该type var chooseType = type ? type : opt.defaultType; // 如果页面有toast则不继续执行 if(document.querySelector('.vue-toast')) return; // 1、创建构造器，定义好提示信息的模板 let toastTip = Vue.extend({ template: ` <div class="vue-toast"> <div class="vue-tip tip-${chooseType} fadeIn">${toast}</div> </div> ` }); // 2、创建实例，挂载到文档以后的地方 console.log(new toastTip().$mount()) let tpl = new toastTip().$mount().$el; // 3、把创建的实例添加到body中 document.body.appendChild(tpl); // 4.三秒后移除 setTimeout(() => { document.body.removeChild(tpl); }, opt.duration); //阻止遮罩滑动 document.querySelector("div.vue-toast").addEventListener("touchmove", function(e) { e.stopPropagation(); e.preventDefault(); }); Toast.installed = true; }; // 显示不同的位置 ['bottom', 'top', 'center'].forEach(type => { Vue.prototype.$toast[type] = (tips) => { return Vue.prototype.$toast(tips, type) } }) }; // 自动安装 ，有了ES6就不要写AMD，CMD了 if(typeof window !== 'undefined' && window.Vue) { window.Vue.use(Toast) }; export default Toast;<template> <div id="me"> <h1>{{getMy&&getMy.name}}--{{getMy&&getMy.age}}</h1> <h1>我是Vue {{this.$store.state.my.name}}--{{this.$store.state.my.age}}</h1> <div class="btn"> <button @click='setName'>设置姓名</button> <button @click='setAge'>设置年龄</button> <button @click='setAction'>异步Action</button> <button @click='alertToast'>Toast</button> </div> </div> </template> <script> import Vue from 'vue' import { mapGetters,mapMutations,mapActions } from 'vuex' import Toast from '../js/Toast' Vue.use(Toast,{ //支持全局配置 defaultType: "top", duration: "10000" }) export default { name: 'Me', methods: { ...mapMutations([ 'setMe' // 映射 this.setMe() 为 this.$store.commit('setMe') ]), ...mapActions([ 'getTopic' // 映射 this.getTopic() 为 this.$store.dispatch('getTopic') ]), setName(){ this.setMe({ type:'name', num:'王麻子' }) }, setAge(){ this.$store.commit('setMe',{ type:'age', num:'100' }) }, setAction(){ this.getTopic(); }, alertToast(){ console.log(this); console.log(this.$toast("我是一个Toast")); //console.log(this.$toast.bottom("我是一个Toast")); } }, computed: { ...mapGetters([ 'getApiVal','getApiValComm','getMy' ]) } } </script> <style scoped> #me { width: 80%; height: 1000px; margin: 0 auto; border: 1px solid red; background: white; } h1 { color: red; text-align: center; } .btn{ display: flex; justify-content: space-around; align-items: center; } button{ border: 1px solid red; width: 100px; height: 30px; background: blue; color: white; cursor: pointer; } </style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
