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", |
"id": "uni-popup", |
||||
"displayName": "uni-popup 弹出层", |
"displayName": "uni-popup 弹出层", |
||||
"version": "1.8.3", |
"version": "1.9.11", |
||||
"description": " Popup 组件，提供常用的弹层", |
"description": " Popup 组件，提供常用的弹层", |
||||
"keywords": [ |
"keywords": [ |
||||
"uni-ui", |
"uni-ui", |
||||
"弹出层", |
"弹出层", |
||||
"弹窗", |
"弹窗", |
||||
"popup", |
"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", |
"encrypt": [], |
||||
"engines": { |
"platforms": { |
||||
"HBuilderX": "" |
"cloud": { |
||||
}, |
"tcb": "x", |
||||
"directories": { |
"aliyun": "x", |
||||
"example": "../../temps/example_temps" |
"alipay": "x" |
||||
}, |
}, |
||||
"dcloudext": { |
"client": { |
||||
"sale": { |
"uni-app": { |
||||
"regular": { |
"vue": { |
||||
"price": "0.00" |
"vue2": "√", |
||||
}, |
"vue3": "√" |
||||
"sourcecode": { |
}, |
||||
"price": "0.00" |
"web": { |
||||
} |
"safari": "√", |
||||
}, |
"chrome": "√" |
||||
"contact": { |
}, |
||||
"qq": "" |
"app": { |
||||
}, |
"vue": "√", |
||||
"declaration": { |
"nvue": "√", |
||||
"ads": "无", |
"android": "√", |
||||
"data": "无", |
"ios": "√", |
||||
"permissions": "无" |
"harmony": "√" |
||||
}, |
}, |
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
"mp": { |
||||
"type": "component-vue" |
"weixin": "√", |
||||
}, |
"alipay": "√", |
||||
"uni_modules": { |
"toutiao": "√", |
||||
"dependencies": [ |
"baidu": "√", |
||||
"uni-scss", |
"kuaishou": "-", |
||||
"uni-transition" |
"jd": "-", |
||||
], |
"harmony": "-", |
||||
"encrypt": [], |
"qq": "√", |
||||
"platforms": { |
"lark": "-" |
||||
"cloud": { |
}, |
||||
"tcb": "y", |
"quickapp": { |
||||
"aliyun": "y" |
"huawei": "-", |
||||
}, |
"union": "-" |
||||
"client": { |
} |
||||
"App": { |
}, |
||||
"app-vue": "y", |
"uni-app-x": { |
||||
"app-nvue": "y" |
"web": { |
||||
}, |
"safari": "√", |
||||
"H5-mobile": { |
"chrome": "√" |
||||
"Safari": "y", |
}, |
||||
"Android Browser": "y", |
"app": { |
||||
"微信浏览器(Android)": "y", |
"android": "√", |
||||
"QQ浏览器(Android)": "y" |
"ios": "√", |
||||
}, |
"harmony": "√" |
||||
"H5-pc": { |
}, |
||||
"Chrome": "y", |
"mp": { |
||||
"IE": "y", |
"weixin": "√" |
||||
"Edge": "y", |
} |
||||
"Firefox": "y", |
} |
||||
"Safari": "y" |
} |
||||
}, |
} |
||||
"小程序": { |
} |
||||
"微信": "y", |
} |
||||
"阿里": "y", |
|
||||
"百度": "y", |
|
||||
"字节跳动": "y", |
|
||||
"QQ": "y" |
|
||||
}, |
|
||||
"快应用": { |
|
||||
"华为": "u", |
|
||||
"联盟": "u" |
|
||||
}, |
|
||||
"Vue": { |
|
||||
"vue2": "y", |
|
||||
"vue3": "y" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue