init
This commit is contained in:
shuhongfan
@@ -0,0 +1,136 @@
|
||||
"use strict";
|
||||
var uni_modules_uniPopup_components_uniPopup_popup = require("../uni-popup/popup.js");
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
var uni_modules_uniPopup_components_uniPopup_i18n_index = require("../uni-popup/i18n/index.js");
|
||||
const { t } = common_vendor.initVueI18n(uni_modules_uniPopup_components_uniPopup_i18n_index.messages);
|
||||
const _sfc_main = {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [uni_modules_uniPopup_components_uniPopup_popup.popup],
|
||||
emits: ["confirm", "close"],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "error"
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: "base"
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: "error",
|
||||
focus: false,
|
||||
val: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok");
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel");
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder");
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title");
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val;
|
||||
},
|
||||
mode(val) {
|
||||
if (val === "input") {
|
||||
this.dialogType = "info";
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.val = val;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.popup.disableMask();
|
||||
if (this.mode === "input") {
|
||||
this.dialogType = "info";
|
||||
this.val = this.value;
|
||||
} else {
|
||||
this.dialogType = this.type;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.focus = true;
|
||||
},
|
||||
methods: {
|
||||
onOk() {
|
||||
if (this.mode === "input") {
|
||||
this.$emit("confirm", this.val);
|
||||
} else {
|
||||
this.$emit("confirm");
|
||||
}
|
||||
if (this.beforeClose)
|
||||
return;
|
||||
this.popup.close();
|
||||
},
|
||||
closeDialog() {
|
||||
this.$emit("close");
|
||||
if (this.beforeClose)
|
||||
return;
|
||||
this.popup.close();
|
||||
},
|
||||
close() {
|
||||
this.popup.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.t($options.titleText),
|
||||
b: common_vendor.n("uni-popup__" + $data.dialogType),
|
||||
c: $props.mode === "base"
|
||||
}, $props.mode === "base" ? {
|
||||
d: common_vendor.t($props.content)
|
||||
} : {
|
||||
e: $options.placeholderText,
|
||||
f: $data.focus,
|
||||
g: $data.val,
|
||||
h: common_vendor.o(($event) => $data.val = $event.detail.value)
|
||||
}, {
|
||||
i: common_vendor.t($options.closeText),
|
||||
j: common_vendor.o((...args) => $options.closeDialog && $options.closeDialog(...args)),
|
||||
k: common_vendor.t($options.okText),
|
||||
l: common_vendor.o((...args) => $options.onOk && $options.onOk(...args))
|
||||
});
|
||||
}
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:/project/project-wl-yonghuduan-uniapp-vue3/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="uni-popup-dialog"><view class="uni-dialog-title"><text class="{{['uni-dialog-title-text', b]}}">{{a}}</text></view><view wx:if="{{c}}" class="uni-dialog-content"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><text class="uni-dialog-content-text">{{d}}</text></block></view><view wx:else class="uni-dialog-content"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><input class="uni-dialog-input" type="text" placeholder="{{e}}" focus="{{f}}" value="{{g}}" bindinput="{{h}}"></input></block></view><view class="uni-dialog-button-group"><view class="uni-dialog-button" bindtap="{{j}}"><text class="uni-dialog-button-text">{{i}}</text></view><view class="uni-dialog-button uni-border-left" bindtap="{{l}}"><text class="uni-dialog-button-text uni-button-color">{{k}}</text></view></view></view>
|
||||
@@ -0,0 +1,76 @@
|
||||
/* 水平间距 */
|
||||
/* 水平间距 */
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.uni-dialog-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.uni-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
.uni-dialog-button-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.uni-dialog-button {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
var en = {
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
};
|
||||
var zhHans = {
|
||||
"uni-popup.cancel": "\u53D6\u6D88",
|
||||
"uni-popup.ok": "\u786E\u5B9A",
|
||||
"uni-popup.placeholder": "\u8BF7\u8F93\u5165",
|
||||
"uni-popup.title": "\u63D0\u793A",
|
||||
"uni-popup.shareTitle": "\u5206\u4EAB\u5230"
|
||||
};
|
||||
var zhHant = {
|
||||
"uni-popup.cancel": "\u53D6\u6D88",
|
||||
"uni-popup.ok": "\u78BA\u5B9A",
|
||||
"uni-popup.placeholder": "\u8ACB\u8F38\u5165",
|
||||
"uni-popup.title": "\u63D0\u793A",
|
||||
"uni-popup.shareTitle": "\u5206\u4EAB\u5230"
|
||||
};
|
||||
var messages = {
|
||||
en,
|
||||
"zh-Hans": zhHans,
|
||||
"zh-Hant": zhHant
|
||||
};
|
||||
exports.messages = messages;
|
||||
@@ -0,0 +1,23 @@
|
||||
"use strict";
|
||||
var popup = {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.popup = this.getParent();
|
||||
},
|
||||
methods: {
|
||||
getParent(name = "uniPopup") {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent)
|
||||
return false;
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.popup = popup;
|
||||
@@ -0,0 +1,340 @@
|
||||
"use strict";
|
||||
var common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "uniPopup",
|
||||
components: {},
|
||||
emits: ["change", "maskClick"],
|
||||
props: {
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "center"
|
||||
},
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: "none"
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: "rgba(0, 0, 0, 0.4)"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type])
|
||||
return;
|
||||
this[this.config[type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal])
|
||||
return;
|
||||
this[this.config[this.type]](true);
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val;
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
showPopup(show) {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
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: true,
|
||||
mkclick: true,
|
||||
popupstyle: this.isDesktop ? "fixforpc-top" : "top"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500;
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === "" || this.backgroundColor === "none") {
|
||||
return "transparent";
|
||||
}
|
||||
return this.backgroundColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = common_vendor.index.getSystemInfoSync();
|
||||
this.popupWidth = windowWidth;
|
||||
this.popupHeight = windowHeight + (windowTop || 0);
|
||||
if (safeArea && this.safeArea) {
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom;
|
||||
} else {
|
||||
this.safeAreaInsets = 0;
|
||||
}
|
||||
};
|
||||
fixSize();
|
||||
},
|
||||
unmounted() {
|
||||
this.setH5Visible();
|
||||
},
|
||||
created() {
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true;
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick;
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300;
|
||||
} else {
|
||||
this.duration = 0;
|
||||
}
|
||||
this.messageChild = null;
|
||||
this.clearPropagation = false;
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor;
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
},
|
||||
closeMask() {
|
||||
this.maskShow = false;
|
||||
},
|
||||
disableMask() {
|
||||
this.mkclick = false;
|
||||
},
|
||||
clear(e) {
|
||||
e.stopPropagation();
|
||||
this.clearPropagation = true;
|
||||
},
|
||||
open(direction) {
|
||||
if (this.showPopup) {
|
||||
clearTimeout(this.timer);
|
||||
this.showPopup = false;
|
||||
}
|
||||
let innerType = ["top", "center", "bottom", "left", "right", "message", "dialog", "share"];
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type;
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error("\u7F3A\u5C11\u7C7B\u578B\uFF1A", direction);
|
||||
return;
|
||||
}
|
||||
this[this.config[direction]]();
|
||||
this.$emit("change", {
|
||||
show: true,
|
||||
type: direction
|
||||
});
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false;
|
||||
this.$emit("change", {
|
||||
show: false,
|
||||
type: this.type
|
||||
});
|
||||
clearTimeout(this.timer);
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false;
|
||||
}, 300);
|
||||
},
|
||||
touchstart() {
|
||||
this.clearPropagation = false;
|
||||
},
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
this.clearPropagation = false;
|
||||
return;
|
||||
}
|
||||
this.$emit("maskClick");
|
||||
if (!this.mkclick)
|
||||
return;
|
||||
this.close();
|
||||
},
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? "fixforpc-top" : "top";
|
||||
this.ani = ["slide-top"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === "message") {
|
||||
this.messageChild.timerClose();
|
||||
}
|
||||
});
|
||||
},
|
||||
bottom(type) {
|
||||
this.popupstyle = "bottom";
|
||||
this.ani = ["slide-bottom"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + "px",
|
||||
backgroundColor: this.bg
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
center(type) {
|
||||
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"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = "left";
|
||||
this.ani = ["slide-left"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = "right";
|
||||
this.ani = ["slide-right"];
|
||||
this.transClass = {
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
};
|
||||
if (type)
|
||||
return;
|
||||
this.showPopup = true;
|
||||
this.showTrans = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_uni_transition2 = common_vendor.resolveComponent("uni-transition");
|
||||
_easycom_uni_transition2();
|
||||
}
|
||||
const _easycom_uni_transition = () => "../../../uni-transition/components/uni-transition/uni-transition.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_transition();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.showPopup
|
||||
}, $data.showPopup ? common_vendor.e({
|
||||
b: $data.maskShow
|
||||
}, $data.maskShow ? {
|
||||
c: common_vendor.o($options.onTap),
|
||||
d: common_vendor.p({
|
||||
name: "mask",
|
||||
["mode-class"]: "fade",
|
||||
styles: $data.maskClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
})
|
||||
} : {}, {
|
||||
e: $options.bg,
|
||||
f: common_vendor.n($data.popupstyle),
|
||||
g: common_vendor.o((...args) => $options.clear && $options.clear(...args)),
|
||||
h: common_vendor.o($options.onTap),
|
||||
i: common_vendor.p({
|
||||
["mode-class"]: $data.ani,
|
||||
name: "content",
|
||||
styles: $data.transClass,
|
||||
duration: $data.duration,
|
||||
show: $data.showTrans
|
||||
}),
|
||||
j: common_vendor.o((...args) => $options.touchstart && $options.touchstart(...args)),
|
||||
k: common_vendor.n($data.popupstyle),
|
||||
l: common_vendor.n($options.isDesktop ? "fixforpc-z-index" : "")
|
||||
}) : {});
|
||||
}
|
||||
var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "E:/project/project-wl-yonghuduan-uniapp-vue3/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"]]);
|
||||
wx.createComponent(Component);
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"uni-transition": "../../../uni-transition/components/uni-transition/uni-transition"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view wx:if="{{a}}" class="{{['uni-popup', k, l]}}"><view bindtouchstart="{{j}}"><uni-transition wx:if="{{b}}" key="1" bindclick="{{c}}" u-i="1f086398-0" bind:__l="__l" u-p="{{d}}"/><uni-transition wx:if="{{i}}" u-s="{{['d']}}" key="2" bindclick="{{h}}" u-i="1f086398-1" bind:__l="__l" u-p="{{i}}"><view style="{{'background-color:' + e}}" class="{{['uni-popup__wrapper', f]}}" bindtap="{{g}}"><slot/></view></uni-transition></view></view>
|
||||
@@ -0,0 +1,24 @@
|
||||
/* 水平间距 */
|
||||
/* 水平间距 */
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
.uni-popup.top, .uni-popup.left, .uni-popup.right {
|
||||
top: 0;
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper {
|
||||
display: block;
|
||||
position: relative;
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
}
|
||||
.uni-popup .uni-popup__wrapper.left, .uni-popup .uni-popup__wrapper.right {
|
||||
padding-top: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.fixforpc-z-index {
|
||||
z-index: 999;
|
||||
}
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user