vue封装可复用组件confirm,并绑定在vue原型上的示例

2023-08-10 02:50:04 299

如下所示：

首先我们需要创建confirm.vue，confirm.js这两个文件，一个实现dom结构，一个实现相关逻辑

confirm.vue




.confirm{background-color:rgba(0,0,0,0.6);width:100%;height:100%;position:fixed;top:0;}
.con_box{width:75%;height:22%;background-color:white;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border-radius:5px;}
.context{padding:10px;}
.contexth6{font-size:24px;padding:15px;}
.contextp{font-size:20px;padding:35px15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.btn{padding:15px;text-align:right;}
.btnspan{padding:10px35px;color:white;border-radius:5px;}
.btnspan:nth-child(1){background-color:#f1f1f1;color:rgb(106,223,223);}
.btnspan:nth-child(2){background-color:rgb(106,223,223);}

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







span{font-size:24px;}

以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue封装可复用组件confirm,并绑定在vue原型上的示例

{{text.type}}

随机推荐

vue封装可复用组件confirm,并绑定在vue原型上的示例

{{text.type}}

热门推荐

随机推荐