vue封装可复用组件confirm,并绑定在vue原型上的示例
如下所示:
首先我们需要创建confirm.vue,confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑
confirm.vue
{{text.type}}
{{text.msg}}
{{text.btn.no}} {{text.btn.ok}}
如下所示:
首先我们需要创建confirm.vue,confirm.js这两个文件,一个实现dom结构,一个实现相关逻辑
confirm.vue
{{text.type}}
{{text.msg}}
{{text.btn.no}} {{text.btn.ok}}
confirm.js
importVuefrom'vue'; importconfirmfrom'./confirm.vue'; letconfirmConstructor=Vue.extend(confirm); lettheConfirm=function(text){ returnnewPromise((res,rej)=>{//promise封装,ok执行resolve,no执行rejectlet letconfirmDom=newconfirmConstructor({ el:document.createElement('div') }) document.body.appendChild(confirmDom.$el);//new一个对象,然后插入body里面 confirmDom.text=text;//为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义 confirmDom.ok=function(){ res() confirmDom.isShow=false } confirmDom.close=function(){ rej() confirmDom.isShow=false } }) } exportdefaulttheConfirm; //暴露出去,别忘记挂载到vue的原型上 //=>在main.js里面先引入importtheConfirmfrom'./components/confirm/confirm.js' //=>再挂载Vue.prototype.$confirm=theConfirm; //在需要的地方直接用以下方法调用即可: //this.$confirm({ //type:'提示', //msg:'是否删除这条信息?', //btn:{ //ok:'yes', //no:'no' //} //}).then(()=>{ //console.log('ok') //}) //.catch(()=>{ //console.log('no') //})
main.js
//TheVuebuildversiontoloadwiththe`import`command //(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias. importVuefrom'vue' importAppfrom'./App' importrouterfrom'./router' //这里就是对组件的绑定 importtheConfirmfrom'./components/confirm/confirm.js' Vue.prototype.$confirm=theConfirm; Vue.config.productionTip=false /*eslint-disableno-new*/ newVue({ el:'#app', router, components:{App}, template:'' })
helloworld.vue
点击一下
以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。