Vue自定义全局弹窗组件操作
写在前面
页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了
效果图
弹窗组件
新建一个弹窗的组件——popup.vue
{{title}}
{{content}}
popup.js文件
新建一个popup.js文件,写方法
importVuefrom'vue' importPopupfrom'./popup.vue' constPopupBox=Vue.extend(Popup) Popup.install=function(data){ letinstance=newPopupBox({ data }).$mount() document.body.appendChild(instance.$el) Vue.nextTick(()=>{ instance.show=true //show和弹窗组件里的show对应,用于控制显隐 }) } exportdefaultPopup
main.js引入popup.js
//自定义全局弹窗组件 importVuefrom'vue' importPopupfrom'./components/dialog/popup' Vue.prototype.$popup=Popup.install
组件中使用方法
methods:{ btnClick(){ this.$popup({ http://dh.wk163.comimgUrl:require('../../../static/images/shadow.png'),//顶部图片 title:'我是标题', content:'我是内容', btnText:'我是按钮', click:()=>{ //点击按钮事件 this.$router.push('……') } }) } }
方便以后自己使用,大家也可以参考哦,也希望大家多多支持毛票票,谢谢~~
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。