第一次提交
This commit is contained in:
@fawn-nine
4
uni_modules/z-popup/changelog.md
Normal file
4
uni_modules/z-popup/changelog.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## 1.0.1（2021-06-24）
|
||||
修复微信小程序不显示问题
|
||||
## 1.0.0（2021-05-12）
|
||||
1. 支持uni_modules
|
||||
295
uni_modules/z-popup/components/z-popup/z-popup.vue
Normal file
295
uni_modules/z-popup/components/z-popup/z-popup.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="popup_view" :style="{top:popupTop, bottom: popupBottom, zIndex: zIndex}"
|
||||
:class="{'popup_view_bottom': type == 'bottom' ,'popup_view_center':type == 'center', 'popup_view_top': type == 'top'}"
|
||||
@touchmove="onTouchMove" v-if="currentValue">
|
||||
<!-- 遮罩层动画 -->
|
||||
<view class="popup_mask" @click="hideOnBlur && setAnimationHide()"></view>
|
||||
<!-- 显示信息层 -->
|
||||
<view class="popup_container" ref="popupContainer" :class="{'popup_container_bottom': type == 'bottom' ,'popup_container_center':type == 'center', 'popup_container_top': type == 'top'}" :style="{opacity: opacity, transform: transform}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const animation = weex.requireModule('animation');
|
||||
const dom = weex.requireModule('dom');
|
||||
// #endif
|
||||
export default {
|
||||
props: {
|
||||
//是否显示
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
//点击遮罩层关闭弹窗
|
||||
hideOnBlur: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
//禁止页面滚动（H5生效）
|
||||
scroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 类型
|
||||
// bottom 靠下
|
||||
// center 居中
|
||||
// top 靠上
|
||||
type: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return "bottom";
|
||||
}
|
||||
},
|
||||
// 偏移
|
||||
offset: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
// index
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 500;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.systemInfo = uni.getSystemInfoSync();
|
||||
if (typeof this.value !== "undefined") {
|
||||
if(this.value){
|
||||
this.setAnimationShow();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if(val){
|
||||
this.setAnimationShow();
|
||||
} else {
|
||||
this.setAnimationHide();
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 传进来的值
|
||||
currentValue: false,
|
||||
opacity: 0,
|
||||
popupTop: "inherit",
|
||||
popupBottom: "inherit",
|
||||
transform: "",
|
||||
systemInfo: {},
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onTouchMove: function(event) {
|
||||
!this.scroll && event.preventDefault();
|
||||
},
|
||||
getPxRpx(px){
|
||||
let ratio = 750 / this.systemInfo.screenWidth;
|
||||
return ratio * px;
|
||||
},
|
||||
setAnimationShow() {
|
||||
this.currentValue = true;
|
||||
this.$nextTick(() => {
|
||||
this.timer && clearTimeout(this.timer);
|
||||
this.$emit("input", true);
|
||||
this.$emit("change", true);
|
||||
if (this.type == "bottom") {
|
||||
this.popupTop = "0rpx";
|
||||
if(this.offset > 0){
|
||||
this.popupBottom = this.offset + "rpx";
|
||||
} else {
|
||||
this.popupBottom = this.getPxRpx(this.systemInfo.windowBottom) + "rpx";
|
||||
}
|
||||
this.animationParsing({
|
||||
translateY: 0,
|
||||
defaulTranslateY: 1,
|
||||
opacity: 1
|
||||
});
|
||||
} else if (this.type == "center") {
|
||||
this.popupTop = "0rpx";
|
||||
this.popupBottom = "0rpx";
|
||||
this.animationParsing({
|
||||
scale: 1,
|
||||
defaulScale: 0,
|
||||
opacity: 1
|
||||
});
|
||||
} else if (this.type == "top") {
|
||||
this.popupBottom = "0rpx";
|
||||
if(this.offset > 0){
|
||||
this.popupTop = (this.offset + this.getPxRpx(this.systemInfo.statusBarHeight)) + "rpx";
|
||||
this.maskTop = this.popupTop;
|
||||
} else {
|
||||
this.popupTop = "0rpx";
|
||||
this.maskTop = "0rpx";
|
||||
}
|
||||
this.animationParsing({
|
||||
defaulTranslateY: -1,
|
||||
translateY: 0,
|
||||
opacity: 1
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
setAnimationHide() {
|
||||
this.timer && clearTimeout(this.timer);
|
||||
if (this.type == "bottom") {
|
||||
this.animationParsing({
|
||||
defaulTranslateY: 0,
|
||||
translateY: 1,
|
||||
opacity: 0
|
||||
});
|
||||
// this.popupTop = "inherit";
|
||||
// this.popupBottom = "0rpx";
|
||||
} else if (this.type == "center") {
|
||||
// this.popupTop = "0rpx";
|
||||
// this.popupBottom = "0rpx";
|
||||
this.animationParsing({
|
||||
scale: 0,
|
||||
defaulScale: 1,
|
||||
opacity: 0
|
||||
});
|
||||
} else if (this.type == "top") {
|
||||
this.animationParsing({
|
||||
defaulTranslateY: 0,
|
||||
translateY: -1,
|
||||
opacity: 0
|
||||
});
|
||||
// this.popupTop = "0rpx";
|
||||
// this.popupBottom = "inherit";
|
||||
}
|
||||
this.timer = setTimeout(() => {
|
||||
this.currentValue = false;
|
||||
this.$emit("input", false);
|
||||
this.$emit("change", false);
|
||||
}, 300);
|
||||
},
|
||||
animationParsing(data){
|
||||
// #ifndef APP-NVUE
|
||||
setTimeout(() => {
|
||||
let transform = "";
|
||||
if(data.hasOwnProperty("translateX")){
|
||||
transform += " translateX("+ (data.translateX * 100) +"%)"
|
||||
}
|
||||
if(data.hasOwnProperty("translateY")){
|
||||
transform += " translateY("+ (data.translateY * 100) +"%)"
|
||||
}
|
||||
if(data.hasOwnProperty("scale")){
|
||||
transform += " scale("+ data.scale +")"
|
||||
}
|
||||
this.opacity = data.opacity;
|
||||
this.transform = transform;
|
||||
},10);
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
let popupContainer = this.$refs.popupContainer;
|
||||
if(popupContainer){
|
||||
// if(data.hasOwnProperty("defaulTranslateY") || data.hasOwnProperty("defaulScale")){
|
||||
// let defaulTransform = "";
|
||||
// if(data.hasOwnProperty("defaulTranslateY")){
|
||||
// defaulTransform = "translateY(" + (data.defaulTranslateY * 100) + "%)";
|
||||
// }
|
||||
// if(data.hasOwnProperty("defaulScale")){
|
||||
// defaulTransform = "scale(" + data.defaulScale + ")";
|
||||
// }
|
||||
// this.transform = defaulTransform;
|
||||
// }
|
||||
if(Array.isArray(popupContainer)){
|
||||
popupContainer = popupContainer[0];
|
||||
}
|
||||
let transform = "";
|
||||
if(data.hasOwnProperty("translateX") || data.hasOwnProperty("translateY")){
|
||||
transform += " translate("+ (data.translateX ? data.translateX * 100 : 0) +"%, " + (data.translateY ? data.translateY * 100 : 0) + "%)";
|
||||
}
|
||||
if(data.hasOwnProperty("scale")){
|
||||
transform += " scale("+ data.scale +")"
|
||||
}
|
||||
animation.transition(popupContainer, {
|
||||
styles: {
|
||||
transform: transform,
|
||||
transformOrigin: 'center center',
|
||||
opacity: data.opacity,
|
||||
},
|
||||
duration: 300, //ms
|
||||
timingFunction: 'ease',
|
||||
delay: 0 //ms
|
||||
}, function () { });
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup_view {
|
||||
position: fixed;
|
||||
z-index: 500;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
.popup_view_bottom {
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.popup_view_top {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
.popup_view_center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/*遮罩层*/
|
||||
.popup_mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.popup_container {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
min-height: 50rpx;
|
||||
transition: all 0.4s;
|
||||
z-index: 2;
|
||||
/* #endif */
|
||||
z-index: 501;
|
||||
opacity: 0;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
border-radius: 30rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.popup_container_bottom {
|
||||
transform: translateY(100%);
|
||||
width: 750rpx;
|
||||
}
|
||||
.popup_container_center {
|
||||
}
|
||||
.popup_container_top {
|
||||
transform: translateY(-100%);
|
||||
width: 750rpx;
|
||||
}
|
||||
</style>
|
||||
79
uni_modules/z-popup/package.json
Normal file
79
uni_modules/z-popup/package.json
Normal file
@@ -0,0 +1,79 @@
|
||||
{
|
||||
"id": "z-popup",
|
||||
"displayName": "弹窗，上弹窗，下弹窗，中间弹窗",
|
||||
"version": "1.0.1",
|
||||
"description": "弹窗，上弹窗，下弹窗，中间弹窗",
|
||||
"keywords": [
|
||||
"弹窗",
|
||||
"下弹窗",
|
||||
"中间弹窗",
|
||||
"上弹窗"
|
||||
],
|
||||
"repository": "https://github.com/zhouwei1994/uni-app-demo",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.0.7"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "465081029"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
uni_modules/z-popup/readme.md
Normal file
51
uni_modules/z-popup/readme.md
Normal file
@@ -0,0 +1,51 @@
|
||||
# 弹窗，上弹窗，下弹窗，中间弹窗
|
||||
|
||||
弹窗，上弹窗，下弹窗，中间弹窗
|
||||
|
||||
| `QQ交流群(607391225)` | `微信交流群（加我好友备注"进群"）` |
|
||||
| ----------------------------|--------------------------- |
|
||||
|||
|
||||
| QQ群号：607391225 |微信号：zhou0612wei|
|
||||
|
||||
### [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
|
||||
|
||||
### 案例一
|
||||
```
|
||||
<z-popup v-model="true" @change="onChange">
|
||||
<view class="popup_title">
|
||||
<text @click="popupShow = false">取消</text>
|
||||
<view>弹窗标题</view>
|
||||
<text @click="popupShow = false">确定</text>
|
||||
</view>
|
||||
<view class="popup_content">
|
||||
弹窗内容
|
||||
</view>
|
||||
</z-popup>
|
||||
|
||||
// js
|
||||
methods: {
|
||||
onChange(e){
|
||||
if(e){
|
||||
uni.showToast({
|
||||
title:"打开了弹窗",
|
||||
icon:"none"
|
||||
});
|
||||
}else {
|
||||
uni.showToast({
|
||||
title:"关闭了弹窗",
|
||||
icon:"none"
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
### 属性
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------- | ---------------------------------------------------|
|
||||
| value | Boolean | false | 控制弹窗是否打开 |
|
||||
| hideOnBlur | Boolean | true | 点击遮罩层关闭弹窗|
|
||||
| scroll | Boolean | true | 禁止页面滚动（H5生效） |
|
||||
| type | String | bottom | 弹窗方位bottom 靠下， center 居中， top 靠上 |
|
||||
| offset | Number | 0 | type=bottom和type=top的时候设置这个数据弹窗会朝相反的方向偏移 |
|
||||
| zIndex | Number | 500 | 设置弹窗的层级, 普通vue页面有效 |
|
||||
Reference in New Issue
Block a user