no message
This commit is contained in:
288
uni_modules/uni-popup/components/uni-popup/uni-popup.js
Normal file
288
uni_modules/uni-popup/components/uni-popup/uni-popup.js
Normal file
@@ -0,0 +1,288 @@
|
||||
var t = require("../../../../common/vendor.js"),
|
||||
o = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
animation: { type: Boolean, default: !0 },
|
||||
type: { type: String, default: "center" },
|
||||
isMaskClick: { type: Boolean, default: null },
|
||||
maskClick: { type: Boolean, default: null },
|
||||
backgroundColor: { type: String, default: "none" },
|
||||
safeArea: { type: Boolean, default: !0 },
|
||||
maskBackgroundColor: { type: String, default: "rgba(0, 0, 0, 0.4)" },
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function (t) {
|
||||
this.config[t] && this[this.config[t]](!0);
|
||||
},
|
||||
immediate: !0,
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function (t) {
|
||||
this.config[t] && this[this.config[this.type]](!0);
|
||||
},
|
||||
immediate: !0,
|
||||
},
|
||||
maskClick: {
|
||||
handler: function (t) {
|
||||
this.mkclick = t;
|
||||
},
|
||||
immediate: !0,
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function (t) {
|
||||
this.mkclick = t;
|
||||
},
|
||||
immediate: !0,
|
||||
},
|
||||
showPopup: function (t) {},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: !1,
|
||||
showTrans: !1,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: "top",
|
||||
bottom: "bottom",
|
||||
center: "center",
|
||||
left: "left",
|
||||
right: "right",
|
||||
message: "top",
|
||||
dialog: "center",
|
||||
share: "bottom",
|
||||
},
|
||||
maskClass: {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.4)",
|
||||
},
|
||||
transClass: { position: "fixed", left: 0, right: 0 },
|
||||
maskShow: !0,
|
||||
mkclick: !0,
|
||||
popupstyle: this.isDesktop ? "fixforpc-top" : "top",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDesktop: function () {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg: function () {
|
||||
return "" === this.backgroundColor || "none" === this.backgroundColor
|
||||
? "transparent"
|
||||
: this.backgroundColor;
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
var o = this;
|
||||
!(function () {
|
||||
var i = t.index.getSystemInfoSync(),
|
||||
s = i.windowWidth,
|
||||
e = i.windowHeight,
|
||||
n = i.windowTop,
|
||||
a = i.safeArea,
|
||||
h = i.screenHeight;
|
||||
i.safeAreaInsets;
|
||||
(o.popupWidth = s),
|
||||
(o.popupHeight = e + (n || 0)),
|
||||
a && o.safeArea
|
||||
? (o.safeAreaInsets = h - a.bottom)
|
||||
: (o.safeAreaInsets = 0);
|
||||
})();
|
||||
},
|
||||
unmounted: function () {
|
||||
this.setH5Visible();
|
||||
},
|
||||
created: function () {
|
||||
null === this.isMaskClick && null === this.maskClick
|
||||
? (this.mkclick = !0)
|
||||
: (this.mkclick =
|
||||
null !== this.isMaskClick ? this.isMaskClick : this.maskClick),
|
||||
this.animation ? (this.duration = 300) : (this.duration = 0),
|
||||
(this.messageChild = null),
|
||||
(this.clearPropagation = !1),
|
||||
(this.maskClass.backgroundColor = this.maskBackgroundColor);
|
||||
},
|
||||
methods: {
|
||||
setH5Visible: function () {},
|
||||
closeMask: function () {
|
||||
this.maskShow = !1;
|
||||
},
|
||||
disableMask: function () {
|
||||
this.mkclick = !1;
|
||||
},
|
||||
clear: function (t) {
|
||||
t.stopPropagation(), (this.clearPropagation = !0);
|
||||
},
|
||||
open: function (t) {
|
||||
this.showPopup ||
|
||||
((t &&
|
||||
-1 !==
|
||||
[
|
||||
"top",
|
||||
"center",
|
||||
"bottom",
|
||||
"left",
|
||||
"right",
|
||||
"message",
|
||||
"dialog",
|
||||
"share",
|
||||
].indexOf(t)) ||
|
||||
(t = this.type),
|
||||
this.config[t]
|
||||
? (this[this.config[t]](),
|
||||
this.$emit("change", { show: !0, type: t }))
|
||||
: console.error("缺少类型：", t));
|
||||
},
|
||||
close: function (t) {
|
||||
var o = this;
|
||||
(this.showTrans = !1),
|
||||
this.$emit("change", { show: !1, type: this.type }),
|
||||
clearTimeout(this.timer),
|
||||
(this.timer = setTimeout(function () {
|
||||
o.showPopup = !1;
|
||||
}, 300));
|
||||
},
|
||||
touchstart: function () {
|
||||
this.clearPropagation = !1;
|
||||
},
|
||||
onTap: function () {
|
||||
this.clearPropagation
|
||||
? (this.clearPropagation = !1)
|
||||
: (this.$emit("maskClick"), this.mkclick && this.close());
|
||||
},
|
||||
top: function (t) {
|
||||
var o = this;
|
||||
(this.popupstyle = this.isDesktop ? "fixforpc-top" : "top"),
|
||||
(this.ani = ["slide-top"]),
|
||||
(this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
}),
|
||||
t ||
|
||||
((this.showPopup = !0),
|
||||
(this.showTrans = !0),
|
||||
this.$nextTick(function () {
|
||||
o.messageChild &&
|
||||
"message" === o.type &&
|
||||
o.messageChild.timerClose();
|
||||
}));
|
||||
},
|
||||
bottom: function (t) {
|
||||
(this.popupstyle = "bottom"),
|
||||
(this.ani = ["slide-bottom"]),
|
||||
(this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + "px",
|
||||
backgroundColor: this.bg,
|
||||
}),
|
||||
t || ((this.showPopup = !0), (this.showTrans = !0));
|
||||
},
|
||||
center: function (t) {
|
||||
(this.popupstyle = "center"),
|
||||
(this.ani = ["zoom-out", "fade"]),
|
||||
(this.transClass = {
|
||||
position: "fixed",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}),
|
||||
t || ((this.showPopup = !0), (this.showTrans = !0));
|
||||
},
|
||||
left: function (t) {
|
||||
(this.popupstyle = "left"),
|
||||
(this.ani = ["slide-left"]),
|
||||
(this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}),
|
||||
t || ((this.showPopup = !0), (this.showTrans = !0));
|
||||
},
|
||||
right: function (t) {
|
||||
(this.popupstyle = "right"),
|
||||
(this.ani = ["slide-right"]),
|
||||
(this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}),
|
||||
t || ((this.showPopup = !0), (this.showTrans = !0));
|
||||
},
|
||||
},
|
||||
};
|
||||
Array || t.resolveComponent("uni-transition")(), Math;
|
||||
var i = t._export_sfc(o, [
|
||||
[
|
||||
"render",
|
||||
function (o, i, s, e, n, a) {
|
||||
return t.e(
|
||||
{ a: n.showPopup },
|
||||
n.showPopup
|
||||
? t.e(
|
||||
{ b: n.maskShow },
|
||||
n.maskShow
|
||||
? {
|
||||
c: t.o(a.onTap),
|
||||
d: t.p({
|
||||
name: "mask",
|
||||
"mode-class": "fade",
|
||||
styles: n.maskClass,
|
||||
duration: n.duration,
|
||||
show: n.showTrans,
|
||||
}),
|
||||
}
|
||||
: {},
|
||||
{
|
||||
e: a.bg,
|
||||
f: t.n(n.popupstyle),
|
||||
g: t.o(function () {
|
||||
return a.clear && a.clear.apply(a, arguments);
|
||||
}),
|
||||
h: t.o(a.onTap),
|
||||
i: t.p({
|
||||
"mode-class": n.ani,
|
||||
name: "content",
|
||||
styles: n.transClass,
|
||||
duration: n.duration,
|
||||
show: n.showTrans,
|
||||
}),
|
||||
j: t.o(function () {
|
||||
return a.touchstart && a.touchstart.apply(a, arguments);
|
||||
}),
|
||||
k: t.n(n.popupstyle),
|
||||
l: t.n(a.isDesktop ? "fixforpc-z-index" : ""),
|
||||
}
|
||||
)
|
||||
: {}
|
||||
);
|
||||
},
|
||||
],
|
||||
]);
|
||||
wx.createComponent(i);
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
||||
29
uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
Normal file
29
uni_modules/uni-popup/components/uni-popup/uni-popup.wxml
Normal file
@@ -0,0 +1,29 @@
|
||||
<view class="{{['uni-popup',k,l]}}" wx:if="{{a}}">
|
||||
<view bindtouchstart="{{j}}">
|
||||
<uni-transition
|
||||
bind:__l="__l"
|
||||
bindclick="{{c}}"
|
||||
key="1"
|
||||
uI="1d6c42a0-0"
|
||||
uP="{{d}}"
|
||||
wx:if="{{b}}"
|
||||
></uni-transition>
|
||||
<uni-transition
|
||||
bind:__l="__l"
|
||||
bindclick="{{h}}"
|
||||
key="2"
|
||||
uI="1d6c42a0-1"
|
||||
uP="{{i}}"
|
||||
uS="{{['d']}}"
|
||||
wx:if="{{i}}"
|
||||
>
|
||||
<view
|
||||
bindtap="{{g}}"
|
||||
class="{{['uni-popup__wrapper',f]}}"
|
||||
style="{{'background-color:'+e}}"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</view>
|
||||
24
uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
Normal file
24
uni_modules/uni-popup/components/uni-popup/uni-popup.wxss
Normal file
@@ -0,0 +1,24 @@
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
.uni-popup.left,
|
||||
.uni-popup.right,
|
||||
.uni-popup.top {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left,
|
||||
.uni-popup .uni-popup__wrapper.right {
|
||||
flex: 1;
|
||||
padding-top: 0;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user