first commit
This commit is contained in:
87
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/props.js
vendored
Normal file
87
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/props.js
vendored
Normal file
@@ -0,0 +1,87 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
|
||||
const props = {
|
||||
props: {
|
||||
// 是否展示modal
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.show
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: [String],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.title
|
||||
},
|
||||
// 弹窗内容
|
||||
content: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.content
|
||||
},
|
||||
// 确认文案
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.confirmText
|
||||
},
|
||||
// 取消文案
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.cancelText
|
||||
},
|
||||
// 是否显示确认按钮
|
||||
showConfirmButton: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.showConfirmButton
|
||||
},
|
||||
// 是否显示取消按钮
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.showCancelButton
|
||||
},
|
||||
// 确认按钮颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.confirmColor
|
||||
},
|
||||
// 取消文字颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.cancelColor
|
||||
},
|
||||
// 对调确认和取消的位置
|
||||
buttonReverse: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.buttonReverse
|
||||
},
|
||||
// 是否开启缩放效果
|
||||
zoom: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.zoom
|
||||
},
|
||||
// 是否异步关闭,只对确定按钮有效
|
||||
asyncClose: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.asyncClose
|
||||
},
|
||||
// 是否允许点击遮罩关闭modal
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.closeOnClickOverlay
|
||||
},
|
||||
// 给一个负的margin-top,往上偏移,避免和键盘重合的情况
|
||||
negativeTop: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.negativeTop
|
||||
},
|
||||
// modal宽度,不支持百分比,可以数值,px,rpx单位
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.width
|
||||
},
|
||||
// 确认按钮的样式,circle-圆形,square-方形,如设置,将不会显示取消按钮
|
||||
confirmButtonShape: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.confirmButtonShape
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.props = props;
|
||||
70
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.acss
vendored
Normal file
70
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.acss
vendored
Normal file
@@ -0,0 +1,70 @@
|
||||
.u-empty.data-v-f667648f,
|
||||
.u-empty__wrap.data-v-f667648f,
|
||||
.u-tabs.data-v-f667648f,
|
||||
.u-tabs__wrapper.data-v-f667648f,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-f667648f,
|
||||
.u-tabs__wrapper__scroll-view.data-v-f667648f,
|
||||
.u-tabs__wrapper__nav.data-v-f667648f,
|
||||
.u-tabs__wrapper__nav__line.data-v-f667648f {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.u-modal.data-v-f667648f {
|
||||
width: 650rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.u-modal__title.data-v-f667648f {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.u-modal__content.data-v-f667648f {
|
||||
padding: 12px 25px 25px 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.u-modal__content__text.data-v-f667648f {
|
||||
font-size: 15px;
|
||||
color: #606266;
|
||||
flex: 1;
|
||||
}
|
||||
.u-modal__button-group.data-v-f667648f {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.u-modal__button-group--confirm-button.data-v-f667648f {
|
||||
flex-direction: column;
|
||||
padding: 0px 25px 15px 25px;
|
||||
}
|
||||
.u-modal__button-group__wrapper.data-v-f667648f {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
}
|
||||
.u-modal__button-group__wrapper--confirm.data-v-f667648f, .u-modal__button-group__wrapper--only-cancel.data-v-f667648f {
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.u-modal__button-group__wrapper--cancel.data-v-f667648f, .u-modal__button-group__wrapper--only-confirm.data-v-f667648f {
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.u-modal__button-group__wrapper--hover.data-v-f667648f {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.u-modal__button-group__wrapper__text.data-v-f667648f {
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
1
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.axml
vendored
Normal file
1
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.axml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<u-popup class="data-v-f667648f" u-s="{{['d']}}" onClick="{{v}}" u-i="f667648f-0" onVI="__l" u-p="{{w}}"><view class="u-modal data-v-f667648f" style="{{'width:' + t}}"><text a:if="{{a}}" class="u-modal__title data-v-f667648f">{{b}}</text><view class="u-modal__content data-v-f667648f" style="{{'padding-top:' + d}}"><slot><text class="u-modal__content__text data-v-f667648f">{{c}}</text></slot></view><view a:if="{{e}}" class="u-modal__button-group--confirm-button data-v-f667648f"><slot name="confirmButton"></slot></view><block a:else><u-line class="data-v-f667648f" u-i="f667648f-1,f667648f-0" onVI="__l"></u-line><view class="u-modal__button-group data-v-f667648f" style="{{'flex-direction:' + s}}"><view a:if="{{f}}" hover-stay-time="{{150}}" hover-class="u-modal__button-group__wrapper--hover" class="{{('u-modal__button-group__wrapper') + ' ' + 'u-modal__button-group__wrapper--cancel' + ' ' + 'data-v-f667648f' + ' ' + i}}" onTap="{{j}}"><text class="u-modal__button-group__wrapper__text data-v-f667648f" style="{{'color:' + h}}">{{g}}</text></view><u-line a:if="{{k}}" class="data-v-f667648f" u-i="f667648f-2,f667648f-0" onVI="__l" u-p="{{l}}"></u-line><view a:if="{{m}}" hover-stay-time="{{150}}" hover-class="u-modal__button-group__wrapper--hover" class="{{('u-modal__button-group__wrapper') + ' ' + 'u-modal__button-group__wrapper--confirm' + ' ' + 'data-v-f667648f' + ' ' + q}}" onTap="{{r}}"><u-loading-icon a:if="{{n}}" class="data-v-f667648f" u-i="f667648f-3,f667648f-0" onVI="__l"></u-loading-icon><text a:else class="u-modal__button-group__wrapper__text data-v-f667648f" style="{{'color:' + p}}">{{o}}</text></view></view></block></view></u-popup>
|
||||
112
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.js
vendored
Normal file
112
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.js
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_components_uModal_props = require("./props.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
|
||||
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "u-modal",
|
||||
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uModal_props.props],
|
||||
data() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show(n) {
|
||||
if (n && this.loading)
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
emits: ["confirm", "cancel", "close"],
|
||||
methods: {
|
||||
addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
|
||||
// 点击确定按钮
|
||||
confirmHandler() {
|
||||
if (this.asyncClose) {
|
||||
this.loading = true;
|
||||
}
|
||||
this.$emit("confirm");
|
||||
},
|
||||
// 点击取消按钮
|
||||
cancelHandler() {
|
||||
this.$emit("cancel");
|
||||
},
|
||||
// 点击遮罩
|
||||
// 从原理上来说,modal的遮罩点击,并不是真的点击到了遮罩
|
||||
// 因为modal依赖于popup的中部弹窗类型,中部弹窗比较特殊,虽有然遮罩,但是为了让弹窗内容能flex居中
|
||||
// 多了一个透明的遮罩,此透明的遮罩会覆盖在灰色的遮罩上,所以实际上是点击不到灰色遮罩的,popup内部在
|
||||
// 透明遮罩的子元素做了.stop处理,所以点击内容区,也不会导致误触发
|
||||
clickHandler() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit("close");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_u_line2 = common_vendor.resolveComponent("u-line");
|
||||
const _easycom_u_loading_icon2 = common_vendor.resolveComponent("u-loading-icon");
|
||||
const _easycom_u_popup2 = common_vendor.resolveComponent("u-popup");
|
||||
(_easycom_u_line2 + _easycom_u_loading_icon2 + _easycom_u_popup2)();
|
||||
}
|
||||
const _easycom_u_line = () => "../u-line/u-line.js";
|
||||
const _easycom_u_loading_icon = () => "../u-loading-icon/u-loading-icon.js";
|
||||
const _easycom_u_popup = () => "../u-popup/u-popup.js";
|
||||
if (!Math) {
|
||||
(_easycom_u_line + _easycom_u_loading_icon + _easycom_u_popup)();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: _ctx.title
|
||||
}, _ctx.title ? {
|
||||
b: common_vendor.t(_ctx.title)
|
||||
} : {}, {
|
||||
c: common_vendor.t(_ctx.content),
|
||||
d: `${_ctx.title ? 12 : 25}px`,
|
||||
e: _ctx.$slots.confirmButton
|
||||
}, _ctx.$slots.confirmButton ? {} : common_vendor.e({
|
||||
f: _ctx.showCancelButton
|
||||
}, _ctx.showCancelButton ? {
|
||||
g: common_vendor.t(_ctx.cancelText),
|
||||
h: _ctx.cancelColor,
|
||||
i: common_vendor.n(_ctx.showCancelButton && !_ctx.showConfirmButton && "u-modal__button-group__wrapper--only-cancel"),
|
||||
j: common_vendor.o((...args) => $options.cancelHandler && $options.cancelHandler(...args))
|
||||
} : {}, {
|
||||
k: _ctx.showConfirmButton && _ctx.showCancelButton
|
||||
}, _ctx.showConfirmButton && _ctx.showCancelButton ? {
|
||||
l: common_vendor.p({
|
||||
direction: "column"
|
||||
})
|
||||
} : {}, {
|
||||
m: _ctx.showConfirmButton
|
||||
}, _ctx.showConfirmButton ? common_vendor.e({
|
||||
n: $data.loading
|
||||
}, $data.loading ? {} : {
|
||||
o: common_vendor.t(_ctx.confirmText),
|
||||
p: _ctx.confirmColor
|
||||
}, {
|
||||
q: common_vendor.n(!_ctx.showCancelButton && _ctx.showConfirmButton && "u-modal__button-group__wrapper--only-confirm"),
|
||||
r: common_vendor.o((...args) => $options.confirmHandler && $options.confirmHandler(...args))
|
||||
}) : {}, {
|
||||
s: _ctx.buttonReverse ? "row-reverse" : "row"
|
||||
}), {
|
||||
t: $options.addUnit(_ctx.width),
|
||||
v: common_vendor.o($options.clickHandler),
|
||||
w: common_vendor.p({
|
||||
mode: "center",
|
||||
zoom: _ctx.zoom,
|
||||
show: _ctx.show,
|
||||
customStyle: {
|
||||
borderRadius: "6px",
|
||||
overflow: "hidden",
|
||||
marginTop: `-${$options.addUnit(_ctx.negativeTop)}`
|
||||
},
|
||||
closeOnClickOverlay: _ctx.closeOnClickOverlay,
|
||||
safeAreaInsetBottom: false,
|
||||
duration: 400
|
||||
})
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f667648f"]]);
|
||||
my.createComponent(Component);
|
||||
9
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.json
vendored
Normal file
9
unpackage/dist/dev/mp-alipay/uni_modules/uview-plus/components/u-modal/u-modal.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"u-line": "../u-line/u-line",
|
||||
"u-loading-icon": "../u-loading-icon/u-loading-icon",
|
||||
"u-popup": "../u-popup/u-popup"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user