feat: popup样式调整 & demo

ant-design · Aug 29, 2024 · 2529244 · 2529244
1 parent b0a50b8
commit 2529244
Show file tree

Hide file tree

Showing 26 changed files with 597 additions and 51 deletions.
diff --git a/compiled/alipay/demo/pages/Popup/index.axml b/compiled/alipay/demo/pages/Popup/index.axml
@@ -1,7 +1,12 @@
 <ant-popup
   visible="{{basicVisible}}"
+  showClose="{{true}}"
+  showBack="{{true}}"
+  title="标题"
   height="{{250}}"
   width="{{250}}"
+  onClickCloseIcon="onClickCloseIcon"
+  onClickBackIcon="onClickBackIcon"
   position="{{position}}"
   animation="{{animation}}"
   onClose="handlePopupClose"
@@ -11,24 +16,70 @@
   </view>
 </ant-popup>
 <ant-popup
-  visible="{{closeVisible}}"
-  height="{{250}}"
+  visible="{{customizeVisible}}"
+  height="{{350}}"
+  onClickCloseIcon="onClickCloseIcon"
+  onClickBackIcon="onClickBackIcon"
+  backgroundImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*1zlbRZpwRXYAAAAAAAAAAAAADiWwAQ/original"
   position="bottom"
+  showClose="{{true}}"
   animation="{{animation}}"
   onClose="handlePopupClose"
 >
-  <view style="padding: 12px">
-    从屏幕滑出或弹出一块自定义内容区，用于展示弹窗、信息提示、选择输入、切换等内容。
+  <view class="customize-content">
+    <image
+      mode="widthFix"
+      class="customize-content-image"
+      src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*SD-BTaA-k_wAAAAAAAAAAAAADiWwAQ/original"
+    ></image>
+    <ant-button
+      onTap="handlePopupClose"
+      style="margin-top: 60rpx;"
+      type="primary"
+    >去开通</ant-button>
+    <ant-button
+      onTap="handlePopupClose"
+      style="margin-top: 24rpx;"
+    >暂不开通</ant-button>
+  </view>
+</ant-popup>
+<ant-popup
+  visible="{{topImageVisible}}"
+  height="{{450}}"
+  className="customize-top-image-popup"
+  onClickCloseIcon="onClickCloseIcon"
+  onClickBackIcon="onClickBackIcon"
+  backgroundImage="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*jVxmQq4bhoUAAAAAAAAAAAAADiWwAQ/original"
+  position="bottom"
+  showClose="{{false}}"
+  animation="{{animation}}"
+  onClose="handlePopupClose"
+>
+  <view class="customize-content">
+    <image
+      mode="widthFix"
+      class="customize-content-image1"
+      src="https://mdn.alipayobjects.com/huamei_ahikbw/afts/img/A*Jly2R5hYEm8AAAAAAAAAAAAADiWwAQ/original"
+    ></image>
+    <ant-button
+      onTap="handlePopupClose"
+      style="margin-top: 60rpx;"
+      type="primary"
+    >去开通</ant-button>
+    <ant-button
+      onTap="handlePopupClose"
+      style="margin-top: 24rpx;"
+    >暂不开通</ant-button>
+    <view class="customize-content-text">可在其他地方查看</view>
   </view>
-  <ant-icon
-    style="position: absolute; right: 12px; top: 12px"
-    type="CloseOutline"
-    onTap="handlePopupClose"
-  ></ant-icon>
 </ant-popup>
 <ant-popup
   visible="{{scrollVisible}}"
   position="bottom"
+  title="超长内容滚动"
+  onClickCloseIcon="onClickCloseIcon"
+  onClickBackIcon="onClickBackIcon"
+  showClose="{{true}}"
   animation="{{animation}}"
   onClose="handlePopupClose"
 >
@@ -127,7 +178,8 @@
   >
     右侧弹出
   </ant-button>
-  <ant-button onTap="handleShowClose">自定义弹窗内关闭</ant-button>
+  <ant-button onTap="handleShowCustomize">自定义弹框内容 并支持背景图</ant-button>
+  <ant-button onTap="handleShowTopImage">顶部图片</ant-button>
   <ant-button onTap="handleShowScroll">超长内容滚动</ant-button>
 </container>
 <list>

diff --git a/compiled/alipay/demo/pages/Popup/index.js b/compiled/alipay/demo/pages/Popup/index.js
@@ -4,13 +4,23 @@ Page({
         basicVisible: false,
         animation: true,
         scrollVisible: false,
-        closeVisible: false,
+        customizeVisible: false,
+        topImageVisible: false,
+    },
+    onClickCloseIcon() {
+        this.showToast('点击了关闭icon');
+        this.handlePopupClose();
+    },
+    onClickBackIcon() {
+        this.showToast('点击了返回icon');
+        this.handlePopupClose();
     },
     handlePopupClose() {
         this.setData({
             basicVisible: false,
             scrollVisible: false,
-            closeVisible: false,
+            customizeVisible: false,
+            topImageVisible: false,
         });
     },
     handleShowBasic(e) {
@@ -26,7 +36,13 @@ Page({
     handleChangeAnimation(checked) {
         this.setData({ animation: checked });
     },
-    handleShowClose() {
-        this.setData({ closeVisible: true });
+    handleShowCustomize() {
+        this.setData({ customizeVisible: true });
+    },
+    handleShowTopImage() {
+        this.setData({ topImageVisible: true });
+    },
+    showToast(content) {
+        my.showToast({ content, duration: 1000 });
     },
 });
diff --git a/compiled/alipay/demo/pages/Popup/index.less b/compiled/alipay/demo/pages/Popup/index.less
@@ -1,3 +1,32 @@
 .list button {
   margin-bottom: 8px;
 }
+.customize-top-image-popup {
+  .ant-popup-content {
+    background: none;
+  }
+}
+.customize-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 140rpx 24rpx 100rpx 24rpx;
+  &-image {
+    width: 666rpx;
+  }
+  &-image1 {
+    width: 702rpx;
+    margin-top: 100rpx;
+  }
+  &-text {
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #999999;
+    text-align: center;
+    padding-top: 30rpx;
+  }
+  .ant-button {
+    width: 100%;
+  }
+}
diff --git a/compiled/alipay/src/Popup/index.axml b/compiled/alipay/src/Popup/index.axml
@@ -21,6 +21,32 @@
     style="{{utils.getContentStyle(position, animation, duration, width, height)}}"
     onAnimationEnd="onAnimationEnd"
   >
+    <image
+      a:if="{{backgroundImage}}"
+      src="{{backgroundImage}}"
+      mode="widthFix"
+      class="ant-popup-content-bg"
+    ></image>
+    <view
+      a:if="{{title || showClose || showBack}}"
+      class="ant-popup-content-header"
+    >
+      <ant-icon
+        a:if="{{showBack}}"
+        className="ant-popup-content-header-icon ant-popup-content-header-icon-back"
+        type="LeftOutline"
+        onTap="onClickBackIcon"
+      ></ant-icon>
+      <view class="ant-popup-content-header-title">
+        {{title}}
+      </view>
+      <ant-icon
+        a:if="{{showClose}}"
+        className="ant-popup-content-header-icon ant-popup-content-header-icon-close"
+        type="CloseOutline"
+        onTap="onClickCloseIcon"
+      ></ant-icon>
+    </view>
     <slot></slot>
     <slot
       name="content"

diff --git a/compiled/alipay/src/Popup/index.json b/compiled/alipay/src/Popup/index.json
@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "ant-icon": "../Icon/index"
+  }
 }
diff --git a/compiled/alipay/src/Popup/index.less b/compiled/alipay/src/Popup/index.less
@@ -10,6 +10,9 @@
   right: 0;
   z-index: 998;
   touch-action: none;
+  &-top-image {
+    width: 100%;
+  }
   &-mask {
     width: 100%;
     height: 100%;
@@ -20,11 +23,50 @@
     }
   }
   &-content {
+    overflow: hidden;
     position: fixed;
     background: @popup-background;
     animation-fill-mode: forwards;
     animation-timing-function: ease-out;
     color: @COLOR_TEXT_PRIMARY;
+    &-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    &-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 114rpx;
+      position: relative;
+      &-title {
+        font-family: 500;
+        line-height: 50 * @rpx;
+        font-size: 36 * @rpx;
+        color: #333333;
+        text-align: center;
+      }
+      &-icon {
+        width: 48 * @rpx;
+        height: 48 * @rpx;
+        font-size: 42 * @rpx;
+        position: absolute;
+        top: 33 * @rpx;
+        color: #999999;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &-back {
+          left: 24 * @rpx;
+        }
+        &-close {
+          right: 24 * @rpx;
+        }
+      }
+    }
   }
   &-transform {
     &-top {

diff --git a/compiled/alipay/src/Popup/index.ts b/compiled/alipay/src/Popup/index.ts
@@ -11,6 +11,12 @@ const isOldVersion = isOldSDKVersion();
 Component(
   PopupDefaultProps,
   {
+    onClickCloseIcon() {
+      this.props.onClickCloseIcon();
+    },
+    onClickBackIcon() {
+      this.props.onClickBackIcon();
+    },
     onTapMask() {
       const { closing } = this.data;
       if (closing) {

diff --git a/compiled/alipay/src/Popup/props.ts b/compiled/alipay/src/Popup/props.ts
@@ -55,6 +55,21 @@ export interface IPopupProps extends IBaseProps {
   maskStyle: string;
 
   zIndex: number;
+
+  /**
+   * @description 展示弹框关闭的icon
+   * @default false
+   */
+  showClose: boolean;
+  /**
+   * @description 展示弹框返回的icon
+   * @default false
+   */
+  showBack: boolean;
+  /**
+   * @description 弹框的背景图
+   */
+  backgroundImage: string;
   /**
    * @description 关闭时回调
    */
@@ -67,12 +82,23 @@ export interface IPopupProps extends IBaseProps {
    * @description 完全关闭时回调
    */
   onAfterClose?: () => void;
+  /**
+   * @description 点击关闭icon时回调
+   */
+  onClickBackIcon?: () => void;
+  /**
+   * @description 点击返回箭头icon时回调
+   */
+  onClickCloseIcon?: () => void;
 }
 
 export const PopupDefaultProps: Partial<IPopupProps> = {
   visible: false,
   destroyOnClose: false,
+  backgroundImage: '',
   showMask: true,
+  showClose: false,
+  showBack: false,
   position: 'bottom',
   // 是否开启动画
   animation: true,
@@ -85,4 +111,6 @@ export const PopupDefaultProps: Partial<IPopupProps> = {
   maskStyle: '',
   // 弹窗层级
   zIndex: 998,
+  onClickBackIcon: () => {},
+  onClickCloseIcon: () => {},
 };
diff --git a/compiled/alipay/src/Popup/variable.less b/compiled/alipay/src/Popup/variable.less
@@ -5,4 +5,4 @@
 // 产品蒙层
 @popup-mask-product: @color-product-mask;
 // popup 圆角
-@popup-radius: @corner-radius-lg;
+@popup-radius: 48 * @rpx;
diff --git a/compiled/wechat/demo/pages/Popup/index.js b/compiled/wechat/demo/pages/Popup/index.js
@@ -4,13 +4,23 @@ Page({
         basicVisible: false,
         animation: true,
         scrollVisible: false,
-        closeVisible: false,
+        customizeVisible: false,
+        topImageVisible: false,
+    },
+    onClickCloseIcon() {
+        this.showToast('点击了关闭icon');
+        this.handlePopupClose();
+    },
+    onClickBackIcon() {
+        this.showToast('点击了返回icon');
+        this.handlePopupClose();
     },
     handlePopupClose() {
         this.setData({
             basicVisible: false,
             scrollVisible: false,
-            closeVisible: false,
+            customizeVisible: false,
+            topImageVisible: false,
         });
     },
     handleShowBasic(e) {
@@ -26,7 +36,13 @@ Page({
     handleChangeAnimation(checked) {
         this.setData({ animation: checked.detail });
     },
-    handleShowClose() {
-        this.setData({ closeVisible: true });
+    handleShowCustomize() {
+        this.setData({ customizeVisible: true });
+    },
+    handleShowTopImage() {
+        this.setData({ topImageVisible: true });
+    },
+    showToast(content) {
+        my.showToast({ content, duration: 1000 });
     },
 });