6 changed files with 405 additions and 150 deletions
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask"> |
|||
<view @click.stop> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
type CloseCallBack = ()=> void; |
|||
let closeCallBack:CloseCallBack = () :void => {}; |
|||
export default { |
|||
emits:["close","clickMask"], |
|||
data() { |
|||
return { |
|||
isShow:false, |
|||
isOpen:false |
|||
} |
|||
}, |
|||
props: { |
|||
maskClick: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
}, |
|||
watch: { |
|||
// 设置show = true 时，如果没有 open 需要设置为 open |
|||
isShow:{ |
|||
handler(isShow) { |
|||
// console.log("isShow",isShow) |
|||
if(isShow && this.isOpen == false){ |
|||
this.isOpen = true |
|||
} |
|||
}, |
|||
immediate:true |
|||
}, |
|||
// 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow |
|||
isOpen:{ |
|||
handler(isOpen) { |
|||
// console.log("isOpen",isOpen) |
|||
if(isOpen && this.isShow == false){ |
|||
this.isShow = true |
|||
} |
|||
}, |
|||
immediate:true |
|||
} |
|||
}, |
|||
methods:{ |
|||
open(){ |
|||
// ...funs : CloseCallBack[] |
|||
// if(funs.length > 0){ |
|||
// closeCallBack = funs[0] |
|||
// } |
|||
this.isOpen = true; |
|||
}, |
|||
clickMask(){ |
|||
if(this.maskClick == true){ |
|||
this.$emit('clickMask') |
|||
this.close() |
|||
} |
|||
}, |
|||
close(): void{ |
|||
this.isOpen = false; |
|||
this.$emit('close') |
|||
closeCallBack() |
|||
}, |
|||
hiden(){ |
|||
this.isShow = false |
|||
}, |
|||
show(){ |
|||
this.isShow = true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.popup-root { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 750rpx; |
|||
height: 100%; |
|||
flex: 1; |
|||
background-color: rgba(0, 0, 0, 0.3); |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 99; |
|||
} |
|||
</style> |
|||
@ -1,87 +1,107 @@ |
|||
{ |
|||
"id": "uni-popup", |
|||
"displayName": "uni-popup 弹出层", |
|||
"version": "1.8.3", |
|||
"description": " Popup 组件，提供常用的弹层", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"弹出层", |
|||
"弹窗", |
|||
"popup", |
|||
"弹框" |
|||
"id": "uni-popup", |
|||
"displayName": "uni-popup 弹出层", |
|||
"version": "1.9.11", |
|||
"description": " Popup 组件，提供常用的弹层", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"弹出层", |
|||
"弹窗", |
|||
"popup", |
|||
"弹框" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "", |
|||
"uni-app": "^4.07", |
|||
"uni-app-x": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue", |
|||
"darkmode": "x", |
|||
"i18n": "x", |
|||
"widescreen": "x" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [ |
|||
"uni-scss", |
|||
"uni-transition" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [ |
|||
"uni-scss", |
|||
"uni-transition" |
|||
], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "x", |
|||
"aliyun": "x", |
|||
"alipay": "x" |
|||
}, |
|||
"client": { |
|||
"uni-app": { |
|||
"vue": { |
|||
"vue2": "√", |
|||
"vue3": "√" |
|||
}, |
|||
"web": { |
|||
"safari": "√", |
|||
"chrome": "√" |
|||
}, |
|||
"app": { |
|||
"vue": "√", |
|||
"nvue": "√", |
|||
"android": "√", |
|||
"ios": "√", |
|||
"harmony": "√" |
|||
}, |
|||
"mp": { |
|||
"weixin": "√", |
|||
"alipay": "√", |
|||
"toutiao": "√", |
|||
"baidu": "√", |
|||
"kuaishou": "-", |
|||
"jd": "-", |
|||
"harmony": "-", |
|||
"qq": "√", |
|||
"lark": "-" |
|||
}, |
|||
"quickapp": { |
|||
"huawei": "-", |
|||
"union": "-" |
|||
} |
|||
}, |
|||
"uni-app-x": { |
|||
"web": { |
|||
"safari": "√", |
|||
"chrome": "√" |
|||
}, |
|||
"app": { |
|||
"android": "√", |
|||
"ios": "√", |
|||
"harmony": "√" |
|||
}, |
|||
"mp": { |
|||
"weixin": "√" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue