html5弹窗修改数据验证model,uni.showModal 弹窗自定义内容样式解决方案

前言

因为各种版本的手机上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 =