mao-mobile 0.0.1

package/ProPopup/README.md

@@ -0,0 +1,131 @@
+# ProPopup 弹出层组件
+
+## 组件介绍
+
+ProPopup 是一个灵活的弹出层组件，支持居中和底部弹出，具备遮罩、动画、圆角、主题色、安全区适配等功能，适用于多种弹窗场景。
+
+## 功能特点
+
+- 支持居中和底部弹出
+- 遮罩层可配置，支持点击关闭
+- 圆角、宽度、背景色等可自定义
+- 支持底部安全区适配
+- 支持主/次按钮自定义、按钮占比自适应
+- 支持插槽自定义头部、内容、底部
+
+## 属性（Props）
+
+| 属性名              | 类型          | 默认值            | 说明                           |
+| ------------------- | ------------- | ----------------- | ------------------------------ |
+| customClass         | String        | ''                | 弹出层自定义类名               |
+| maskShow            | Boolean       | true              | 是否显示遮罩层                 |
+| maskClick           | Boolean       | true              | 点击遮罩层是否关闭弹窗         |
+| backgroundColor     | String        | '#fff'            | 弹出层背景色                   |
+| maskBackgroundColor | String        | 'rgba(0,0,0,0.4)' | 遮罩层背景色                   |
+| borderRadius        | String/Number | -                 | 弹出层圆角                     |
+| position            | String        | 'center'          | 弹出位置：'center' 或 'bottom' |
+| width               | String/Number | '80vw'            | 居中弹出层宽度                 |
+| themeColor          | String        | '#0BC8C8'         | 主题色                         |
+| isShowHeader        | Boolean       | false             | 是否显示头部区域               |
+| isShowClose         | Boolean       | true              | 是否显示关闭图标               |
+| isShowFooter        | Boolean       | false             | 是否显示底部区域               |
+| title               | String        | ''                | 弹窗标题                       |
+| confirmName         | String        | '主按钮'          | 主按钮名称                     |
+| cancelName          | String        | '取消'            | 次按钮名称                     |
+| isShowCancel        | Boolean       | false             | 是否显示次按钮                 |
+| safeArea            | Boolean       | true              | 底部弹出层是否适配安全区       |
+
+## 事件（Events）
+
+| 事件名    | 说明                   | 回调参数          |
+| --------- | ---------------------- | ----------------- |
+| change    | 弹窗显示状态变化时触发 | { show: boolean } |
+| maskClick | 点击遮罩层时触发       | -                 |
+| close     | 点击关闭图标时触发     | -                 |
+| confirm   | 点击主按钮时触发       | -                 |
+| cancel    | 点击次按钮时触发       | -                 |
+
+## 方法（Expose）
+
+| 方法名 | 说明     |
+| ------ | -------- |
+| open   | 打开弹窗 |
+| close  | 关闭弹窗 |
+
+## 插槽（Slots）
+
+- `header`：自定义头部内容
+- 默认插槽：自定义弹窗内容
+- `footer`：自定义底部内容
+
+## 使用示例
+
+```vue
+<template>
+  <ProPopup
+    ref="popupRef"
+    position="bottom"
+    :is-show-header="true"
+    :is-show-footer="true"
+    :is-show-cancel="true"
+    title="温馨提示"
+    confirmName="确定"
+    cancelName="取消"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+    @change="onChange"
+    @maskClick="onMaskClick"
+  >
+    <template #header>
+      <view>自定义头部</view>
+    </template>
+    <view>弹窗内容</view>
+    <template #footer>
+      <view>自定义底部</view>
+    </template>
+  </ProPopup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import ProPopup from "./index.vue";
+
+const popupRef = ref(null);
+
+const onConfirm = () => {
+  // 主按钮回调
+};
+const onCancel = () => {
+  // 次按钮回调
+};
+const onChange = ({ show }) => {
+  // 弹窗显示状态变化
+};
+const onMaskClick = () => {
+  // 遮罩点击
+};
+</script>
+```
+
+## 按钮布局说明
+
+- 同时有主、次按钮时，主按钮宽度占 60%，次按钮占 40%，中间间隔 32rpx。
+- 仅有主按钮时，主按钮宽度占 100%。
+
+## 样式定制
+
+- `.pro-popup`：弹窗容器
+- `.pro-popup__mask`：遮罩层
+- `.pro-popup__wrapper`：内容容器
+- `.pro-popup__header`：头部区域
+- `.pro-popup__footer`：底部区域
+- `.pro-popup__footer--button--confirm`：主按钮
+- `.pro-popup__footer--button--cancel`：次按钮
+
+可通过覆盖这些类名自定义样式。
+
+## 注意事项
+
+- 组件使用 `position: fixed`，请确保父元素不会影响其定位。
+- 动画、圆角、宽度等均可通过 props 配置。
+- 安全区适配依赖 `env(safe-area-inset-bottom)`，如需关闭可设置 `:safe-area="false"`。

package/ProPopup/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <view
+    :class="['pro-popup', customClass, { 'pro-popup--hidden': !showPopup }]"
+  >
+    <view
+      v-if="maskShow"
+      class="pro-popup__mask"
+      :class="[`popup-mask-${showPopup ? 'show' : 'hide'}`]"
+      :style="{ backgroundColor: maskBackgroundColor }"
+      @tap="onTap"
+    >
+    </view>
+    <view
+      class="pro-popup__wrapper"
+      :class="[
+        `pro-popup__wrapper--${position}`,
+        `popup-${position}-${showPopup ? 'show' : 'hide'}`,
+      ]"
+      :style="wrapperStyle"
+      @tap.stop
+    >
+      <view class="pro-popup__content">
+        <slot name="header" v-if="isShowHeader">
+          <view class="pro-popup__header">
+            <text class="pro-popup__header--title">{{ title }}</text>
+            <image
+              v-if="isShowClose"
+              class="pro-popup__header--close"
+              src="https://static.wxb.com.cn/frontEnd/images/ideacome-mobile/popup-close.png"
+              mode="widthFix"
+              @tap="close"
+            ></image>
+          </view>
+        </slot>
+        <view class="pro-popup__content--body">
+          <slot></slot>
+        </view>
+        <slot name="footer" v-if="isShowFooter">
+          <view class="pro-popup__footer">
+            <view
+              v-if="isShowCancel"
+              class="pro-popup__footer--button--cancel"
+              @tap="handleCancel"
+              >{{ cancelName }}</view
+            >
+            <view
+              :class="[
+                'pro-popup__footer--button--confirm',
+                {
+                  'pro-popup__footer--button--confirm--full': !isShowCancel,
+                },
+              ]"
+              @tap="handleConfirm"
+              >{{ confirmName }}</view
+            >
+          </view>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  // 弹出层的自定义类名
+  customClass: {
+    type: String,
+    default: "",
+  },
+  // 是否显示遮罩层
+  maskShow: {
+    type: Boolean,
+    default: true,
+  },
+  // 点击遮罩层是否关闭
+  maskClick: {
+    type: Boolean,
+    default: true,
+  },
+  // 弹出层背景色
+  backgroundColor: {
+    type: String,
+    default: "#fff",
+  },
+  // 遮罩层背景色
+  maskBackgroundColor: {
+    type: String,
+    default: "rgba(0, 0, 0, 0.4)",
+  },
+  // 弹出层圆角
+  borderRadius: {
+    type: [String, Number],
+  },
+  // 弹出位置
+  position: {
+    type: String,
+    default: "center",
+    validator: (value) => ["center", "bottom"].includes(value),
+  },
+  // 弹出层标题
+  title: {
+    type: String,
+    default: "",
+  },
+  // 是否显示头部区域
+  isShowHeader: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示关闭图标
+  isShowClose: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示底部区域
+  isShowFooter: {
+    type: Boolean,
+    default: false,
+  },
+  // 主按钮名称
+  confirmName: {
+    type: String,
+    default: "确定",
+  },
+  // 次按钮名称
+  cancelName: {
+    type: String,
+    default: "取消",
+  },
+  // 是否显示次按钮
+  isShowCancel: {
+    type: Boolean,
+    default: true,
+  },
+  // 居中弹出层宽度
+  width: {
+    type: [String, Number],
+    default: "calc(100vw - 80rpx)",
+  },
+  // 弹出层按钮主题色
+  themeColor: {
+    type: String,
+    default: "#0BC8C8",
+  },
+  // 底部弹出层是否适配安全区
+  safeArea: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(["change", "maskClick", "close", "confirm", "cancel"]);
+
+// 内部状态
+const showPopup = ref(false);
+
+// 计算样式
+const wrapperStyle = computed(() => {
+  let defaultborderRadius =
+    props.position === "bottom" ? "20rpx 20rpx 0 0" : "20rpx";
+  let borderRadius = [undefined, null, ""].includes(props.borderRadius)
+    ? defaultborderRadius
+    : props.borderRadius;
+  return {
+    backgroundColor: props.backgroundColor,
+    borderRadius:
+      typeof props.borderRadius === "number"
+        ? props.position === "bottom"
+          ? `${borderRadius}rpx ${borderRadius}rpx 0 0`
+          : `${borderRadius}rpx`
+        : borderRadius,
+  };
+});
+
+const popupWidth = computed(() => {
+  if (props.position === "center") {
+    return props.width;
+  } else {
+    return "100%";
+  }
+});
+// 监听 showPopup 变化
+watch(
+  () => showPopup.value,
+  (newVal) => {
+    emit("change", { show: newVal });
+    // #ifdef H5
+    // 处理 h5 滚动穿透的问题
+    setH5Visible(!newVal);
+    // #endif
+  }
+);
+
+const setH5Visible = (visible) => {
+  document.getElementsByTagName("body")[0].style.overflow = visible
+    ? "visible"
+    : "hidden";
+};
+
+const open = () => {
+  showPopup.value = true;
+};
+
+const close = () => {
+  showPopup.value = false;
+  emit("close");
+};
+
+const handleConfirm = () => {
+  emit("confirm");
+};
+
+const handleCancel = () => {
+  emit("cancel");
+};
+
+// 点击遮罩层
+const onTap = () => {
+  emit("maskClick");
+  if (props.maskClick) {
+    showPopup.value = false;
+  }
+};
+
+// 暴露方法给父组件
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+.pro-popup {
+  font-family: PingFang SC, sans-serif;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999999;
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s, opacity 0s;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 300ms, opacity 0s 300ms;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: opacity 300ms ease-in-out;
+  }
+
+  &__wrapper {
+    position: fixed;
+    will-change: transform, opacity;
+
+    &--center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
+      .pro-popup__content {
+        min-height: 440rpx;
+        max-height: calc(100vh - 80rpx);
+      }
+      .pro-popup__footer {
+        padding: 0 48rpx 48rpx;
+      }
+    }
+
+    &--bottom {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
+      .pro-popup__content {
+        min-height: 440rpx;
+        max-height: 100vh;
+        padding-bottom: v-bind(
+          'safeArea ? "env(safe-area-inset-bottom)" : "0"'
+        );
+      }
+      .pro-popup__footer {
+        padding: 0 48rpx 76rpx 48rpx;
+      }
+    }
+    .pro-popup__content {
+      color: #333;
+      box-sizing: border-box;
+      width: v-bind(popupWidth);
+      position: relative;
+      display: flex;
+      flex-direction: column;
+
+      .pro-popup__header {
+        flex-shrink: 0;
+        padding: 48rpx 48rpx 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &--title {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #212121;
+        }
+        &--close {
+          width: 28rpx;
+        }
+      }
+      .pro-popup__content--body {
+        margin: 32rpx 48rpx 48rpx 48rpx;
+        flex: 1;
+        overflow: auto;
+      }
+      .pro-popup__footer {
+        flex-shrink: 0;
+        display: flex;
+        gap: 32rpx;
+        &--button--cancel {
+          flex: 1;
+          height: 84rpx;
+          border: 1px solid v-bind("themeColor");
+          background: #fff;
+          border-radius: 16rpx;
+          font-weight: 400;
+          font-size: 30rpx;
+          color: v-bind("themeColor");
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        &--button--confirm {
+          width: calc((100% - 32rpx) * 0.618);
+          height: 84rpx;
+          background: v-bind("themeColor");
+          border-radius: 16rpx;
+          font-weight: 400;
+          font-size: 30rpx;
+          color: #ffffff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &--full {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 遮罩层动画
+.popup-mask-show {
+  opacity: 1;
+}
+
+.popup-mask-hide {
+  opacity: 0;
+}
+
+// 内容层动画 - 居中弹出
+.popup-center-show {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+
+.popup-center-hide {
+  transform: translate(-50%, -50%) scale(0.3);
+  opacity: 0;
+}
+
+// 内容层动画 - 底部弹出
+.popup-bottom-show {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.popup-bottom-hide {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "mao-mobile",
+  "private": false,
+  "version": "0.0.1",
+  "description": "基于uniapp组件库",
+  "author": "wangzy",
+  "browserslist": [
+    "Android >= 4",
+    "ios >= 8"
+  ],
+  "devDependencies": {
+    "scss": "^0.2.4"
+  }
+}