- 新建popUp弹框文件夹，文件夹下新建index.js文件。
通过js实现弹框，完整代码如下：
export class show_model {
constructor(option = {}) {
this.bodyModel = null;
this.cancelModel = null;
this.confirmModel = null;
this.noModel = null;
this.pageHeight = uni.getSystemInfoSync().screenHeight;
this.pageWidth = uni.getSystemInfoSync().screenWidth;
let model_content = option.msg || "";
let model_tit = option.title || '';
let disPlayButton = option.disPlayButton || "";
let focusButton = option.focusButton || "yes";
let timing = option.timing || 0;
let opacity = option.opacity || 0.4;
let clickEvent = option.IsclickEvent || false;
let cancelVal = option.cancelVal || '关闭';
let noVal = option.noVal || "取消";
let confirmVal = option.confirmVal || '确认';
let cancelColor = option.cancelColor || '#000';
let confirmColor = option.confirmColor || '#000';
let align = option.align || "center";
if (option.timing) {
setTimeout(() => {
this.hide();
}, option.timing)
}
let fn = () => {};
this.$event = option.$event || fn;
let backOff = option.backOff || false;
this.creatView({
height: `${this.pageHeight}px`,
top: 0
}, opacity, clickEvent, {
'tit': model_tit,
'content': model_content,
cancelVal,
noVal,
confirmVal,
confirmColor,
cancelColor,
align,
disPlayButton,
focusButton,
timing
})
if (!backOff) {
this.backbtn();
}
}
backbtn() {
let that = this;
plus.key.addEventListener('backbutton', function(e) {
that.hide();
}, false)
}
creatView(style, opa, clickEvent, modelInfo) {
style = {
left: '0px',
width: '100%',
...style
}
let platform = plus.os.name.toLowerCase();
let view = new plus.nativeObj.View('showModalView', style);
let width = 300;
let height = 150;
let titleHeight = 20;
let contentHeight = 60;
let startTop = (this.pageHeight - height) / 2;
let startLeft = (this.pageWidth - width) / 2;
let titleTop = startTop + 10;
let contentTop = titleTop + 30;
let lineTop = startTop + height - 40;
let buttonHeight = 40;
let countBtn = modelInfo.disPlayButton.split(" ").length || 3;
let btnWidth = width / countBtn;
let linePosition = btnWidth;
view.draw([{
tag: 'rect',
id: 'modal',
color: `rgba(0,0,0,${opa})`,
position: {
top: '0px',
left: '0px',
width: '100%',
height: '100%'
}
},
{
tag: 'rect',
id: 'content',
rectStyles: {
borderWidth: '2px',
radius: '8px',
color: `rgba(255,255,255,1)`
},
position: {
top: startTop + 'px',
left: startLeft + 'px',
width: width + 'px',
height: height + 'px'
}
},
{
tag: 'font',
id: 'title',
text: modelInfo.tit,
textStyles: {
size: '16px',
color: '#000'
},
position: {
top: titleTop + 'px',
left: startLeft + 'px',
width: width + 'px',
height: titleHeight + 'px'
}
},
{
tag: 'font',
id: 'text',
text: modelInfo.content,
textStyles: {
size: '14px',
color: '#000',
whiteSpace: 'normal',
align: modelInfo.align
},
position: {
top: contentTop + 'px',
left: startLeft + 'px',
width: width + 'px',
height: contentHeight + 'px'
}
},
]);
var num = 0.55;
if (modelInfo.disPlayButton.includes("no")) {
let viewNo = new plus.nativeObj.View('no', {
width: btnWidth + 'px',
height: buttonHeight + 'px',
top: lineTop + 'px',
left: startLeft + (countBtn === 1 ? 0 : countBtn === 2 ? btnWidth : btnWidth) + 'px',
backgroundColor: 'rgba(0,0,0,0)',
});
viewNo.draw([{
tag: 'font',
id: 'no',
text: modelInfo.noVal,
textStyles: {
color: modelInfo.focusButton === 'no' ? "#00aa00" : modelInfo.noColor,
size: '14px'
}
}, ]);
viewNo.addEventListener("click", (e) => {
this.$event({
res: false,
types: 'no'
});
this.hide();
}, false);
this.noModel = viewNo;
}
if (modelInfo.disPlayButton.includes("cancel")) {
let vie
wCancel = new plus.nativeObj.View('cancel', {
width: btnWidth + 'px',
height: buttonHeight + 'px',
top: lineTop + 'px',
left: startLeft + (countBtn === 1 ? 0 : countBtn === 2 ? btnWidth : 2 * btnWidth) + 'px',
backgroundColor: 'rgba(0,0,0,0)',
});
viewCancel.draw([{
tag: 'font',
id: 'cancel',
text: modelInfo.cancelVal,
textStyles: {
color: modelInfo.focusButton === 'cancel' ? "#00aa00" : modelInfo.cancelColor,
size: '14px'
}
}, ]);
viewCancel.addEventListener("click", (e) => {
this.hide();
}, false);
this.cancelModel = viewCancel;
}
if(modelInfo.disPlayButton.includes('yes')){
let viewconfirm = new plus.nativeObj.View('confirm', {
width: btnWidth + 'px',
height: buttonHeight + 'px',
top: lineTop + 'px',
left: startLeft + 'px',
backgroundColor: 'rgba(0,0,0,0)',
}, );
viewconfirm.draw([{
tag: 'font',
id: 'confirm',
text: modelInfo.confirmVal,
textStyles: {
color: modelInfo.focusButton === 'yes' ? "#00aa00" : modelInfo.confirmColor,
size: '14px',
}
}, ]);
viewconfirm.addEventListener("click", (e) => {
this.$event({
res: true,
types: 'confirm'
});
this.hide();
}, false);
this.confirmModel = viewconfirm;
}
this.bodyModel = view;
}
show() {
this.bodyModel.show();
if (this.cancelModel) {
this.cancelModel.show();
}
if (this.noModel) {
this.noModel.show();
}
this.confirmModel.show();
}
hide() {
this.bodyModel.hide();
if (this.cancelModel) {
this.cancelModel.hide();
}
if (this.noModel) {
this.noModel.hide();
}
if(this.confirmModel){
this.confirmModel.hide();
}
}
}
export default show_model
- 新建show_model.js文件。将刚刚的index.js文件引入。完整代码如下：
import show_modal from './index.js'
const xt_show_modal = {
install: function(Vue) {
const show_modal_fun = function(op = {}) {
return new Promise((resolve, reject) => {
let ssm = new show_modal({
...op,
$event: function(e) {
console.log(e)
if (e.res) {
resolve(e);
} else {
reject(e);
}
}
});
ssm.show();
Vue.prototype.$hide = function() {
ssm.hide();
}
})
var promise = uni.showModal({
title: op.title,
content: op.content,
showCancel: !op.delCancel,
cancelText: op.cancelVal,
confirmText: op.confirmVal,
});
return new Promise((resolve, reject) => {
promise.then(data => {
var [err, res] = data;
if (res.confirm) {
resolve()
} else {
reject();
}
})
})
}
uni.$showModal = show_modal_fun
Vue.prototype.$showModal = show_modal_fun
}
};
export default xt_show_modal;
- 在项目的main.js中引入show_model.js文件
import xt_show_modal from '@/utils/popUp/show_model.js'
Vue.use(xt_show_modal);
- 完成后就可以在项目中任意位置使用了，可根据项目实际需求修改弹框样式和弹框参数
uni.$showModal({
title:"提示",
msg:'内容区域',
disPlayButton: "yes no cancel",
focusButton:"yes",
timing: 2000,
}).then(res=>{
console.log(123)
}).catch(res=>{
console.log(999)
});
