添加新文件

unpackage/dist/dev/mp-weixin/uni_modules/uview-plus/components/u-modal/props.js

@@ -0,0 +1,94 @@
+"use strict";
+const uni_modules_uviewPlus_libs_vue = require("../../libs/vue.js");
+const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
+const props = uni_modules_uviewPlus_libs_vue.defineMixin({
+  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
+    },
+    // 文案对齐方式
+    contentTextAlign: {
+      type: String,
+      default: () => uni_modules_uviewPlus_libs_config_props.defProps.modal.contentTextAlign
+    }
+  }
+});
+exports.props = props;
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-modal/props.js.map

unpackage/dist/dev/mp-weixin/uni_modules/uview-plus/components/u-modal/u-modal.js

@@ -0,0 +1,119 @@
+"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", "update:show"],
+  methods: {
+    addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
+    // 点击确定按钮
+    confirmHandler() {
+      if (this.asyncClose) {
+        this.loading = true;
+      } else {
+        this.$emit("update:show", false);
+      }
+      this.$emit("confirm");
+    },
+    // 点击取消按钮
+    cancelHandler() {
+      this.$emit("update:show", false);
+      this.$emit("cancel");
+    },
+    // 点击遮罩
+    // 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
+    // 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
+    // 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
+    // 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
+    clickHandler() {
+      if (this.closeOnClickOverlay) {
+        this.$emit("update:show", false);
+        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.contentTextAlign,
+    e: `${_ctx.title ? 12 : 25}px`,
+    f: _ctx.$slots.confirmButton
+  }, _ctx.$slots.confirmButton ? {} : common_vendor.e({
+    g: _ctx.showCancelButton
+  }, _ctx.showCancelButton ? {
+    h: common_vendor.t(_ctx.cancelText),
+    i: _ctx.cancelColor,
+    j: common_vendor.n(_ctx.showCancelButton && !_ctx.showConfirmButton && "u-modal__button-group__wrapper--only-cancel"),
+    k: common_vendor.o((...args) => $options.cancelHandler && $options.cancelHandler(...args))
+  } : {}, {
+    l: _ctx.showConfirmButton && _ctx.showCancelButton
+  }, _ctx.showConfirmButton && _ctx.showCancelButton ? {
+    m: common_vendor.p({
+      direction: "column"
+    })
+  } : {}, {
+    n: _ctx.showConfirmButton
+  }, _ctx.showConfirmButton ? common_vendor.e({
+    o: $data.loading
+  }, $data.loading ? {} : {
+    p: common_vendor.t(_ctx.confirmText),
+    q: _ctx.confirmColor
+  }, {
+    r: common_vendor.n(!_ctx.showCancelButton && _ctx.showConfirmButton && "u-modal__button-group__wrapper--only-confirm"),
+    s: common_vendor.o((...args) => $options.confirmHandler && $options.confirmHandler(...args))
+  }) : {}, {
+    t: _ctx.buttonReverse ? "row-reverse" : "row"
+  }), {
+    v: $options.addUnit(_ctx.width),
+    w: common_vendor.n(_ctx.customClass),
+    x: common_vendor.o($options.clickHandler),
+    y: 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"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-modal/u-modal.js.map

unpackage/dist/dev/mp-weixin/uni_modules/uview-plus/components/u-modal/u-modal.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "u-line": "../u-line/u-line",
+    "u-loading-icon": "../u-loading-icon/u-loading-icon",
+    "u-popup": "../u-popup/u-popup"
+  }
+}

unpackage/dist/dev/mp-weixin/uni_modules/uview-plus/components/u-modal/u-modal.wxml

@@ -0,0 +1 @@
+<u-popup wx:if="{{y}}" u-s="{{['d']}}" class="{{['data-v-f667648f', w]}}" bindclick="{{x}}" u-i="f667648f-0" bind:__l="__l" u-p="{{y}}"><view class="u-modal data-v-f667648f" style="{{'width:' + v}}"><view wx:if="{{a}}" class="u-modal__title data-v-f667648f">{{b}}</view><view class="u-modal__content data-v-f667648f" style="{{'padding-top:' + e}}"><block wx:if="{{$slots.d}}"><slot></slot></block><block wx:else><text class="u-modal__content__text data-v-f667648f" style="{{'text-align:' + d}}">{{c}}</text></block></view><view wx:if="{{f}}" class="u-modal__button-group--confirm-button data-v-f667648f"><slot name="confirmButton"></slot></view><block wx:else><u-line class="data-v-f667648f" u-i="f667648f-1,f667648f-0" bind:__l="__l"></u-line><view class="u-modal__button-group data-v-f667648f" style="{{'flex-direction:' + t}}"><view wx:if="{{g}}" 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', j]}}" bindtap="{{k}}"><text class="u-modal__button-group__wrapper__text data-v-f667648f" style="{{'color:' + i}}">{{h}}</text></view><u-line wx:if="{{l}}" class="data-v-f667648f" u-i="f667648f-2,f667648f-0" bind:__l="__l" u-p="{{m}}"></u-line><view wx:if="{{n}}" 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', r]}}" bindtap="{{s}}"><u-loading-icon wx:if="{{o}}" class="data-v-f667648f" u-i="f667648f-3,f667648f-0" bind:__l="__l"></u-loading-icon><text wx:else class="u-modal__button-group__wrapper__text data-v-f667648f" style="{{'color:' + q}}">{{p}}</text></view></view></block></view></u-popup>

unpackage/dist/dev/mp-weixin/uni_modules/uview-plus/components/u-modal/u-modal.wxss

@@ -0,0 +1,105 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/* uni.scss */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+.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,
+.up-empty.data-v-f667648f,
+.up-empty__wrap.data-v-f667648f,
+.up-tabs.data-v-f667648f,
+.up-tabs__wrapper.data-v-f667648f,
+.up-tabs__wrapper__scroll-view-wrapper.data-v-f667648f,
+.up-tabs__wrapper__scroll-view.data-v-f667648f,
+.up-tabs__wrapper__nav.data-v-f667648f,
+.up-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: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  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;
+}