Vue全局弹窗:一次注册，全局可弹 |
您所在的位置：网站首页 › 正压接头的使用方法 › Vue全局弹窗:一次注册，全局可弹 |
Vue全局弹窗:一次注册，全局可弹
|
Vue全局弹窗
今天来搞一个全局弹窗，不用每个文件都引入，只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue export default { toast(text) { this.text = text; var dom = document.createElement("toast");//Vue不支持直接使用appendChild方法向dom中添加元素，所以需要用到这个奇怪的方法，来创建一个dom节点 dom.className = "toast"; //给我们创建的dom节点写一个类名 dom.id = "toast" //这是id dom.innerHTML = text; //这个就是内容了，我们把参数 text 传入到这里 document.getElementById("app").appendChild(dom); //现在我们可以拿着做好的节点 直捣黄龙 setTimeout("document.getElementById('toast').remove()", 3000 ) //事情办完 }, data() { return { }; }, };这样，我们创建好了一个 “{{text}}”这样的标签。 这时我们需要把样式写到index.html里，使它全局生效。 index.html //index.html .toast { position: fixed; font-size: 14px; color: #888; top: 20px; background: #fff; box-shadow: 0 0 10px #52525278; height: 20px; z-index: 99999999; text-align: center; border-radius: 10px; padding: 25px 130px; animation: toast 3s forwards cubic-bezier(0.57, 0.85, 0.85, 0.57); } //因为我们设置3秒后销毁元素，所以动画要控制在3秒以内 //加点小动画 //index.html @keyframes toast { 1% { opacity: 0; right: -200px; } 10%{ opacity: 1; right: 20px; } 90%{ opacity: 1; right: 20px; } 100% { opacity: 0; right: -200px; display: none; } }好了，万事俱备，只欠东风了，我们在main.js中注册它 main.js import toast from './toast' Vue.prototype.$toast = toast //我们像使用npm下载的插件一样，直接将它注册为全局prototype //现在我们就可以在Vue项目中的任何一个地方唤醒它了 //小家伙总是出现在右上角！在某个组件中调用 this.$toast.toast("ok"); //在引号中传入你想展示的文字吧
它出现了 |
【本文地址】
今日新闻 |
推荐新闻 |