Fix/popover (#22)

* fix(demo): fix PopoverBase demo style * fix: fix popover arrow style * feat: popover add support for mask Co-authored-by: wyj <wb-wyj631405@antfin.com> Co-authored-by: Simplyme0823 <57203444+Simplyme0823@users.noreply.github.com>
ant-design · Mar 29, 2022 · df34425 · df34425
1 parent e23fa56
commit df34425
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 22 deletions.
diff --git a/demo/pages/Popover/index.acss b/demo/pages/Popover/index.acss
@@ -14,6 +14,7 @@
   background-color: #fff;
   border: 1px solid #dddddd;
   border-radius: 4px;
+  text-align: center;
 }
 .demo-popover-btn-2 {
   width: 80px;
@@ -23,7 +24,14 @@
   background-color: #fff;
   border: 1px solid #dddddd;
   border-radius: 4px;
+  text-align: center;
 }
-page{
+page {
   background-color: #f7f7fa;
 }
+.demo-btn {
+  position: fixed;
+  bottom: 10rpx;
+  width: 40%;
+  left: 30%;
+}
diff --git a/demo/pages/Popover/index.axml b/demo/pages/Popover/index.axml
@@ -2,6 +2,7 @@
   <popover 
     placement="bottom-right"
     visible="{{show}}"
+    mask="{{showMask}}"
     onVisibleChange="onVisibleChange">
 
     <view class="demo-popover-btn-1">
@@ -91,3 +92,8 @@
   </block>
 </popover>
 </view>
+<button 
+  class="demo-btn"
+  onTap="onToggleMask">
+  {{showMask?'隐藏':'显示'}}蒙层
+</button>
diff --git a/demo/pages/Popover/index.js b/demo/pages/Popover/index.js
@@ -2,16 +2,25 @@
 Page({
   data: {
     show: true,
+    showMask: false,
     url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
   },
-  onVisibleChange(e) {
+  onVisibleChange(visible, mode) {
     this.setData({
-      show: e,
+      show: visible,
     });
+    if (mode==='mask') {
+      my.showToast({content: '点击mask关闭', duration:1000 });
+    }
   },
   itemTap(e) {
     my.alert({
       content: `点击_${e.currentTarget.dataset.index}`,
     });
   },
+  onToggleMask(){
+    this.setData({
+      showMask: !this.data.showMask,
+    });
+  },
 });
diff --git a/demo/pages/PopoverBase/index.acss b/demo/pages/PopoverBase/index.acss
@@ -25,7 +25,9 @@
   width: 45%;
 }
 
-.demo-popover-tooltip {
+.demo-popover-items {
   color: #fff;
-  text-align: center;
+  padding: 20rpx;
+  white-space: nowrap;
+  font-size: 28rpx;
 }
diff --git a/demo/pages/PopoverBase/index.axml b/demo/pages/PopoverBase/index.axml
@@ -2,17 +2,18 @@
   <popover 
     placement="{{placement}}"
     visible="{{show}}"
-    mask="{{false}}"
+    mask="{{showMask}}"
     maskClosable="{{true}}"
     onVisibleChange="onVisibleChange">
 
     <view class="demo-popover-btn">
       点击{{show ? '隐藏' : '显示'}} {{placement}}
     </view>
+
+    <view slot="items" class="demo-popover-items">
+      tooltip
+    </view>
 
-    <block slot="items">
-      <view class="demo-popover-tooltip">tooltip</view>
-    </block>
   </popover>
 </view>
 
@@ -22,4 +23,9 @@
     onTap="onNextPositionTap">
     下个位置
   </button>
+  <button 
+    class="demo-btn"
+    onTap="onToggleMask">
+    {{showMask?'隐藏':'显示'}}蒙层
+  </button>
 </view>
diff --git a/demo/pages/PopoverBase/index.js b/demo/pages/PopoverBase/index.js
@@ -3,18 +3,27 @@ Page({
   data: {
     placement: placement[0],
     show: false,
+    showMask: true,
   },
   onNextPositionTap() {
     let index = placement.indexOf(this.data.placement);
     index = index >= placement.length - 1 ? 0 : index + 1;
     this.setData({
-      show: !this.data.show,
+      show: true,
       placement: placement[index],
     });
   },
-  onVisibleChange(e) {
+  onVisibleChange(visible, mode) {
     this.setData({
-      show: e,
+      show: visible,
+    });
+    if (mode==='mask') {
+      my.showToast({content: '点击mask关闭', duration:1000 });
+    }
+  },
+  onToggleMask(){
+    this.setData({
+      showMask: !this.data.showMask,
     });
   },
 });
diff --git a/src/Popover/index.axml b/src/Popover/index.axml
@@ -4,6 +4,8 @@
   </view>
   <view class="amd-popover-container"
     a:if="{{visible}}">
+    <!-- 蒙层 -->
+    <mask show="{{mask}}" fixMaskFull="{{fixMaskFull}}" maskZindex="{{99}}" onMaskTap="onMaskTap"></mask>
     <view class="amd-popover-content amd-popover-{{placement}}">
       <view class="amd-popover-arrow {{mode==='light' ? 'amd-popover-arrow-light' : ''}}"></view>
       <view class="amd-popover-content-bg">

diff --git a/src/Popover/index.json b/src/Popover/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "mask": "../Mask/index"
+  }
 }
diff --git a/src/Popover/index.less b/src/Popover/index.less
@@ -146,7 +146,7 @@
   &-right-top &-arrow,
   &-right-bottom &-arrow {
     transform: translateX(-75%) rotate(-90deg);
-    left: 0;
+    left: 1 * @rpx;
   }
   &-right &-arrow {
     transform: translate(-75%, -50%) rotate(-90deg);
@@ -182,6 +182,7 @@
   &-left-top &-arrow,
   &-left-bottom &-arrow {
     transform: translateX(75%) rotate(90deg);
+    right: 1 * @rpx;
   }
   &-left &-arrow {
     transform: translate(75%, -50%) rotate(90deg);

diff --git a/src/Popover/index.md b/src/Popover/index.md
@@ -28,6 +28,9 @@ toc: false
 | mode | `'dark'` &verbar; `'light'` | 否 | 'dark' | 组件显示模式 |
 | placement | `'top'` &verbar; `'top-right'` &verbar; `'top-left'` &verbar; `'bottom'` &verbar; `'bottom-left'` &verbar; `'bottom-right'` &verbar; `'left'` &verbar; `'left-top'` &verbar; `'left-bottom'` &verbar; `'right'` &verbar; `'right-top'` &verbar; `'right-bottom'` | 否 | "bottom-right" | 方向 |
 | className | string | 否 | - | 类名 |
+| mask | boolean | 否 | false | 是否展示蒙层 |
+| maskClosable | boolean | 否 | true | 是否可点击蒙层关闭 |
+| fixMaskFull | boolean | 否 | false | 用以解决遮罩层受到 transform 影响而显示不全的问题 |
 
 #### PopoverItem
 | 属性 | 类型 | 必填 | 默认值 | 说明 |
@@ -39,7 +42,7 @@ toc: false
 #### Popover
 | 事件名 | 说明 | 类型 |
 | -----|-----|-----|
-| onVisibleChange | 组件隐藏/显示切换，触发回调 | ( visible: boolean ) => void |
+| onVisibleChange | 组件隐藏/显示切换，触发回调 | ( visible: boolean, mode: 'component' &verbar; 'mask' ) => void |
 
 #### PopoverItem
 | 事件名 | 说明 | 类型 |

diff --git a/src/Popover/index.ts b/src/Popover/index.ts
@@ -6,13 +6,13 @@ Component({
     onVisibleChange() {
       const { onVisibleChange, visible } = this.props;
       if (onVisibleChange) {
-        return onVisibleChange(!visible);
+        return onVisibleChange(!visible, 'component');
       }
     },
     onMaskTap() {
-      const { maskClosable } = this.props;
-      if (maskClosable) {
-        this.onVisibleChange();
+      const { maskClosable, onVisibleChange } = this.props;
+      if (maskClosable && onVisibleChange) {
+        onVisibleChange(false, 'mask');
       } else {
         return false;
       }

diff --git a/src/Popover/props.d.ts b/src/Popover/props.d.ts
@@ -13,7 +13,7 @@ export interface IPopoverProps extends IBaseProps {
   /**
    * @description visible 变更时回调
    */
-  onVisibleChange?: (visible: boolean) => void;
+  onVisibleChange?: (visible: boolean, from: 'component' | 'mask') => void;
   /**
    * @description 方向
    * @default "bottom-right"
@@ -23,6 +23,21 @@ export interface IPopoverProps extends IBaseProps {
    * @description 组件显示模式
    * @default dark
    */
-  mode?: 'dark' | 'light'
+  mode?: 'dark' | 'light',
+  /**
+   * @description 是否展示蒙层
+   * @default false
+   */
+  mask?: boolean;
+  /**
+   * @description 是否可点击蒙层关闭
+   * @default true
+   */
+  maskClosable?: boolean;
+  /**
+   * @description 用以解决遮罩层受到 transform 影响而显示不全的问题
+   * @default false
+   */
+  fixMaskFull?: boolean;
 }
 export declare const PopoverDefaultProps: Partial<IPopoverProps>;
diff --git a/src/Popover/props.js b/src/Popover/props.js
@@ -1,7 +1,8 @@
 export const PopoverDefaultProps = {
   visible: false,
   mask: false,
-  maskClosable: false,
+  maskClosable: true,
   placement: 'bottom-right',
   mode: 'dark',
+  fixMaskFull: false,
 };