首页 新闻 会员 周边

VueJs Confirm确认框重写

0
悬赏园豆:5 [已解决问题] 解决于 2019-08-26 10:57

VueJS小白,现在想重写一个Confirm确认框,以组件模式实现,实现之后点击按钮可以这样使用:
This.$ConfirmAlert(“确认删除吗?”).then(=>{
// 执行删除方法
}).catch(
=>{
// 删除失败
})
有哪位大神能够提供一个完整的Demo呢,最好是组件的编写,到最后的使用完整的一个Demo,谢谢!

gyangjing的主页 gyangjing | 初学一级 | 园豆:4
提问于:2019-08-22 15:06
< >
分享
最佳答案
0

还是自己来解决吧:总共三个文件:ConfirmAlert.js
import Vue from 'vue';
import confirm from '../components/ConfirmAlert.vue';
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (text) {
return new Promise((res, rej) =>
{
//promise封装,ok执行resolve,no执行rejectlet
let confirmDom = new confirmConstructor({
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
} })
}
export default theConfirm;

ConfirmAlert.vue

<template>
<div class="confirm-container" v-if="isShow">
<div class="confirm-content">
<p id="pimg"><img src="../../../assets/img/salary/tips.jpg" alt=""></p>
<p id="tips">{{text.type}}</p>
<p id="msgContent" >是否确定对这<span id="msgNum">{{text.layerNum}}</span>条数据进行<span>{{text.msgDetail}}</span>操作?</p>
<div id="msgBtn">
<el-button size="mini" id="btnCancel" type="text" @click="close()" v-if="text.btn.no" >
<span >{{text.btn.no}}</span>
</el-button>
<el-button type="primary" id="primary" size="mini" @click="ok()" v-if="text.btn.ok" >
<span>{{text.btn.ok}}</span>
</el-button>
</div>
</div>
</div>
</template>
<script>
export default
{
data(){
return{
isShow:true,
text:{ type:'提示',
msg:'',
btn:{
ok:'确定',
no:'取消'
},
layParameter:'',
layerNum:0,
msgDetail:''
}
}
},
methods:{
close(){
console.log('关闭');
},
ok(){
console.log('确定')
}
}
}
</script>
<style scoped>
.confirm-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1500;
background:rgba(0,0,0,0.6);
-moz-opacity: 0.8;
opacity:.99;
filter: alpha(opacity=99);/* 只支持IE6、7、8、9 */
}

.confirm-content {
width:433px;
height:192px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
border: solid #FFFFFF 1px;
z-index:2000;
}

.mypopover
{
width:433px;
height:192px;
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
border: solid #FFFFFF 1px;
z-index:2000;
top:33.6%;
left:38.7%;
position: absolute;
}

pimg{

width: 22px; 
height: 22px;
position:absolute;
float: left;
left:32px;
top:32px;

}

tips{

/* width:433px;
height:192px; */
top:32px;
left:70px;
float:left;
position:absolute;
color:rgba(0,0,0,0.85);
font-size:16px;
font-family:PingFangSC;
font-weight:500;
line-height:24px;

}

msgContent{

width:331px;
height:22px;
top:68px;
left:70px;;
position:absolute;
font-size:14px;
font-family:PingFangSC;
font-weight:400;
color:rgba(0,0,0,0.65);
line-height:28px;

}

btnCancel{

width:56px;
height:32px;
border-radius:4px;
border:1px solid rgba(217,217,217,1);
background:rgba(255,255,255,1);
padding-left:2px;
padding-top:6px;

}

btnCancel span{

width:29px;
height:23px;
font-size:14px;
font-weight:400;
color:rgba(73,80,96,1);
line-height:20px;

}

primary{

width:56px;
height:31px;
background:rgba(0,144,255,1);
border-radius:4px;
border:1px solid rgba(217,217,217,1);
padding-left:13px;
padding-top:4px;

}

primary span{

width:32px;
height:22px;
font-size:14px;
font-family:MicrosoftYaHei;
color:rgba(255,255,255,1);
line-height:22px;

}

msgBtn

{
margin-bottom: 25px;
position: absolute;
top:138px;
left:282px;
}

msgNum{

width:10px;
height:33px;
font-size:24px;
font-family:PingFangSC;
font-weight:500;
color:rgba(0,144,255,1);
line-height:33px;

}

</style>
在项目的主入口的JS文件中加入以下语句:main.js
import theConfirm from '@/pages/salary/data/ConfirmAlert.js'
Vue.prototype.$Alretconfirm = theConfirm;

在页面中调用:
页面的按钮事件:
this.$Alretconfirm({
type: '提示',
msg:'是否删除这条信息?'
btn: {
ok: '确定', no: '取消'
},
layerNum: 1,
//msgDetail: ''
}).then(() => {
// 确认
// do something
}).catch(() => {
//取消
})

gyangjing | 初学一级 |园豆:4 | 2019-08-26 10:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册