更新记录
1.0.0(2024-09-06)
第一版
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app自定义弹窗
github地址,喜欢的可以star下哦
插件预览图
使用教程
1.插件代码拷贝
- 下载后把components目录下modal.vue文件拷贝到自己项目目录下
2.插件使用
<template>
<view>
<button type="primary" @tap="isShowAdTip = true">显示</button>
<modal v-if="isShowAdTip" :cancelVisble="false" @cancel="cancel" @ok="ok">这是提示内容</modal>
</view>
</template>
<script>
export default {
data() {
return {
isShowAdTip:true
}
},
methods: {
cancel(){
console.log("cancel回调")
this.isShowAdTip = false
},
ok(){
console.log("ok回调")
this.isShowAdTip = false
}
}
}
</script>
API
// 取消按钮文字
cancelText:{
type:String,
default:"取消"
},
// 取消按钮是否显示
cancelVisble:{
type:Boolean,
default:true
},
// 确认按钮文字
okText:{
type:String,
default:"确定"
},
// 幽灵属性,使按钮背景透明
okGhost:{
type:Boolean,
default:false
},
// 点击蒙层是否允许关闭
maskClosable:{
type:Boolean,
default:true
},
// 是否显示关闭按钮
closable:{
type:Boolean,
default:true
},
// 事件
@cancel 点击遮罩层或右上角叉或取消按钮的回调
@ok 点击确定回调
兼容性
uni-app项目中使用都兼容