前言
因为各种版本的手机上Modal 原生弹窗各不相同且无法修改内容及样式，所以需要一个高度自定义的弹窗以解决弹窗样式各端不同的问题
app解决思路
使用app-plus "background": "transparent" 可以实现伪弹窗(其实是打开一个背景透明的页面)，缺点返回时会触发onShow需要进行处理，
app代码
//pages.json
{
"path": "components/modal/confirmModal/index",
"style": {
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"backgroundColor": "rgba(0,0,0,0)",
"popGesture": "none"
}
}
}
//main.js
import showModal from '@/common/js/modal.js'
Vue.prototype.$showModal = showModal
//modal.js
let $showModal = function(option) {
let params = {
title: "",
content: "",
cancelText: "取消", // 取消按钮的文字
confirmText: "确定", // 确认按钮文字
showCancel: true, // 是否显示取消按钮，默认为 true
}
Object.assign(params, option)
// #ifdef APP-PLUS
let list = []
Object.keys(params).forEach(ele => {
list.push(ele + "=" + params[ele])
})
let paramsStr = list.join('&')
uni.navigateTo({
url: `/components/modal/confirmModal/index?${paramsStr}`
});
return new Promise((resolve, reject) => {
uni.$once("AppModalCancel", () => {
reject()
})
uni.$once("AppModalConfirm", (e) => {
resolve(e)
})
});
// #endif
// #ifndef APP-PLUS
return new Promise((resolve,reject)=>{
uni.showModal({
title:params.title,
content: params.content,
cancelText: params.cancelText,
confirmText: params.confirmText,
showCancel: params.showCancel,
success: (res) => {
if(res.confirm) {
resolve()
} else {
reject()
}
}
});
})
// #endif
}
export default $showModal
//页面调用方法
this.$showModal({
title: '确定删除吗',
content: '',
cancelText:'取消',
confirmText: '确认'
}).then(res =>{}).catch(err=>{})
confirmModal 必须使用nvue页面，不然页面是不透明的
{{title}}
{{content}}
{{cancelText}}
{{confirmText}}
export default {
data() {
return {
title: "",
content: "",
input:false,
inputContent:'',
align: "center", // 对齐方式 left/center/right
cancelText: "取消", // 取消按钮的文字
confirmText: "确定", // 确认按钮颜色
showCancel: true, // 是否显示取消按钮，默认为 true
};
},
onBackPress(options) {
if (options.from === 'navigateBack') {
return false;
}
return true;
},
onLoad(options) {
if (options.showCancel) {
options.showCancel = JSON.parse(options.showCancel)
}
Object.assign(this.$data, options)
},
methods: {
clickLeft() {
// 先关闭后发送事件
this.closeModal();
uni.$emit('AppModalCancel')
},
clickRight() {
// 先关闭后发送事件
this.closeModal();
uni.$emit('AppModalConfirm',this.inputContent)
},
closeModal() {
uni.navigateBack();
}
}
}
// nvue页面只支持flex布局
//样式自定义
H5弹窗解决思路
全局修改uni.showModal 弹窗样式
H5代码
/* #ifndef APP-PLUS */
//自己打开个H5modal 选择元素 改成自己需要的modal 样式
uni-modal {
.uni-modal {}
}
/* #endif */