feat: popover 样式升级

ant-design · Sep 19, 2024 · 8c71ead · 8c71ead
1 parent d212287
commit 8c71ead
Show file tree

Hide file tree

Showing 24 changed files with 474 additions and 32 deletions.
diff --git a/compiled/alipay/demo/pages/Popover/index.axml b/compiled/alipay/demo/pages/Popover/index.axml
@@ -1,6 +1,8 @@
 <container title="基础用法">
   <popover
-    content="prompt"
+    content="简单的tips"
+    placement="top-left"
+    showCloseIcon="{{true}}"
     style="display: inline-block"
   >
     <ant-button
@@ -13,28 +15,78 @@
 </container>
 <container title="基础用法-回调函数">
   <popover
-    content="prompt"
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
     placement="top"
+    showCloseIcon="{{true}}"
     onVisibleChange="onVisibleChange"
   >
     <ant-button>点我</ant-button>
   </popover>
 </container>
-<container title="自定义颜色">
+<container title="基础用法-图片和行动点按钮">
+  <popover
+    content="这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案这里是一个提示文案很长的Tips，酌情使用文案。单一Tips最多可容纳2行文案…"
+    placement="top"
+    actionText="操作按钮"
+    onTapAction="onTapAction"
+    imageUrl="https://mdn.alipayobjects.com/huamei_mnxlps/afts/img/A*tLCBTqxataIAAAAAAAAAAAAADkqGAQ/original"
+    onVisibleChange="onVisibleChange"
+  >
+    <ant-button>点我</ant-button>
+  </popover>
+</container>
+<container title="自定义">
   <view class="custom">
     <popover
       content="红色"
       color="red"
     >
       <!--display: inline-->
-      <text>点我红色</text>
+      <ant-button
+        style="margin-right: 24rpx;"
+        inline
+        type="primary"
+      >自定义颜色</ant-button>
+    </popover>
+    <popover content="左侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >左侧插槽</ant-button>
+      <icon
+        slot="leftContent"
+        style="font-size: 48rpx; margin-right: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
+    </popover>
+    <popover content="右侧插槽">
+      <!--display: inline-->
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >右侧插槽</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
     <popover
-      content="蓝色"
-      color="blue"
+      className="ant-popover-white"
+      color="white"
+      content="白色背景"
     >
       <!--display: inline-->
-      <text>点我蓝色</text>
+      <ant-button
+        inline
+        style="margin-right: 24rpx;"
+      >白色背景</ant-button>
+      <icon
+        slot="rightContent"
+        style="font-size: 48rpx; margin-left: 24rpx;"
+        type="FaceRecognitionOutline"
+      ></icon>
     </popover>
   </view>
 </container>

diff --git a/compiled/alipay/demo/pages/Popover/index.js b/compiled/alipay/demo/pages/Popover/index.js
@@ -24,4 +24,7 @@ Page({
             visible: !this.data.visible,
         });
     },
+    onTapAction() {
+        my.showToast({ content: '点击了行动点按钮' });
+    },
 });
diff --git a/compiled/alipay/demo/pages/Popover/index.less b/compiled/alipay/demo/pages/Popover/index.less
@@ -10,9 +10,14 @@
   align-items: center;
   justify-content: center;
   min-width: 30px;
-  min-height: 50px;
 }
 
 .custom-child{
   margin: 8px
+}
+
+.ant-popover-white {
+  .ant-popover-inner {
+    color: #000000;
+  }
 }
diff --git a/compiled/alipay/src/Popover/index.axml b/compiled/alipay/src/Popover/index.axml
@@ -23,7 +23,45 @@
       class="ant-popover-inner {{contentClassName || ''}}"
       style="{{color ? 'background:' + color : ''}};{{contentStyle || ''}}"
     >
-      <slot name="content">{{content}}</slot>
+      <view
+        a:if="{{imageUrl}}"
+        class="ant-popover-image"
+      >
+        <image-icon
+          className="ant-popover-image-content"
+          image="{{imageUrl}}"
+        ></image-icon>
+      </view>
+      <slot
+        name="leftContent"
+        a:else
+      ></slot>
+      <slot name="content">
+        <view class="ant-popover-inner-text">
+          {{content}}
+        </view>
+      </slot>
+      <view
+        a:if="{{actionText}}"
+        onTap="onTapAction"
+        class="ant-popover-action"
+      >
+        {{actionText}}
+      </view>
+      <slot
+        name="rightContent"
+        a:else
+      ></slot>
+      <view
+        a:if="{{showCloseIcon}}"
+        onTap="onVisibleChange"
+        className="ant-popover-close"
+      >
+        <image-icon
+          className="ant-popover-close-icon"
+          image="CloseOutline"
+        ></image-icon>
+      </view>
     </view>
   </view>
 </view>

diff --git a/compiled/alipay/src/Popover/index.json b/compiled/alipay/src/Popover/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
+    "image-icon": "../ImageIcon/index",
     "mask": "../Mask/index"
   }
 }
diff --git a/compiled/alipay/src/Popover/index.less b/compiled/alipay/src/Popover/index.less
@@ -10,6 +10,33 @@
     z-index: 999;
   }
 
+  &-close {
+    margin-left: 24 * @rpx;
+    width: 38 * @rpx;
+    height: 38 * @rpx;
+    .ant-popover-close-icon {
+      position: absolute;
+      top: 20 * @rpx;
+      right: 20 * @rpx;
+      font-size: 36 * @rpx;
+    }
+  }
+
+  &-image {
+    padding-right: 24 * @rpx;
+    border-radius: 16 * @rpx;
+  }
+  &-action {
+    background: #ffffff;
+    font-weight: 400;
+    font-size: 24 * @rpx;
+    color: #000000;
+    padding: 10 * @rpx 20 * @rpx;
+    line-height: 33 * @rpx;
+    border-radius: 50vh;
+    margin-left: 24 * @rpx;
+  }
+
   &-mask {
     z-index: 998;
     background: none;
@@ -19,16 +46,35 @@
     min-width: 64 * @rpx;
     max-width: calc(100vw - 48 * @rpx);
     z-index: 999;
+
   }
   &-inner {
     position: relative;
     border-radius: 16 * @rpx;
     overflow: hidden;
-    font-size: 30 * @rpx;
+    font-size: 28 * @rpx;
     background-color: @COLOR_BACKGROUND_POPOVER;
     color: @COLOR_WHITE_DEFAULT;
-    padding: 16 * @rpx 24 * @rpx;
+    padding: 20 * @rpx;
     width: max-content;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    &-text {
+      word-break: break-all;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+      overflow: hidden;
+      max-width: 420 * @rpx;
+      line-height: 40 * @rpx;
+    }
+    .ant-popover-image-content-image {
+      width: 80 * @rpx;
+      height: 80 * @rpx;
+    }
   }
   &-arrow {
     position: absolute;

diff --git a/compiled/alipay/src/Popover/index.ts b/compiled/alipay/src/Popover/index.ts
@@ -71,6 +71,10 @@ Component(
       }
       triggerEvent(this, 'visibleChange', value, e);
     },
+    onTapAction() {
+      this.onVisibleChange();
+      this.props.onTapAction();
+    }
   },
   {
     adjustedPlacement: '',

diff --git a/compiled/alipay/src/Popover/props.ts b/compiled/alipay/src/Popover/props.ts
@@ -47,6 +47,10 @@ export interface IPopoverProps extends IBaseProps {
    * @description visible 变更时回调
    */
   onVisibleChange?: (visible: boolean, e: Record<string, any>) => void;
+  /**
+   * @description 点击行动点
+   */
+  onTapAction?: () => void;
   /**
    * @description 气泡框位置
    */
@@ -74,13 +78,31 @@ export interface IPopoverProps extends IBaseProps {
    * @default true
    */
   autoAdjustOverflow: boolean;
+  /**
+   * @description 是否关闭的icon
+   * @default false
+   */
+  showCloseIcon: boolean;
+  /**
+   * @description 气泡左侧的图片链接
+   * @default ''
+   */
+  imageUrl: string;
+  /**
+   * @description 右侧操作按钮文案
+   * @default ''
+   */
+  actionText: string;
 }
 
 export const PopoverDefaultProps: Partial<IPopoverProps> = {
   visible: null,
+  imageUrl: '',
   defaultVisible: false,
   destroyOnClose: false,
+  showCloseIcon: false,
   contentClassName: '',
+  actionText: '',
   color: '',
   contentStyle: '',
   showMask: true,
@@ -90,4 +112,5 @@ export const PopoverDefaultProps: Partial<IPopoverProps> = {
   maskStyle: '',
   content: '',
   onVisibleChange() {},
+  onTapAction() {},
 };
diff --git a/compiled/wechat/demo/pages/Popover/index.js b/compiled/wechat/demo/pages/Popover/index.js
@@ -24,4 +24,7 @@ Page({
             visible: !this.data.visible,
         });
     },
+    onTapAction() {
+        my.showToast({ content: '点击了行动点按钮' });
+    },
 });