feat: 增加popup关闭按钮

common.scss

@@ -247,28 +247,28 @@
   height: 100%;
 }
 // 绝对定位左上角
-.pi-abso-lt {
+.pi-abso-tl {
   @extend .pi-abso;
 
   top: 0;
   left: 0;
 }
 // 绝对定位右上角
-.pi-abso-rt {
+.pi-abso-tr {
   @extend .pi-abso;
 
   top: 0;
   right: 0;
 }
 // 绝对定位左下角
-.pi-abso-lb {
+.pi-abso-bl {
   @extend .pi-abso;
 
   bottom: 0;
   left: 0;
 }
 // 绝对定位右下角
-.pi-abso-rb {
+.pi-abso-br {
   @extend .pi-abso;
 
   right: 0;

components/pi-loading/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view v-if="show" class="pi-loading" :class="{ vertical: vertical }" :style="{ color: color }">
-    <view v-if="type === 'circle'" class="loading-circle" :style="[cricleStyle]" />
+    <view v-if="type === 'circular'" class="loading-circular" :style="[cricleStyle]" />
     <view v-if="type === 'spinner'" class="loading-spinner" :style="[cricleStyle]">
       <view v-for="line of 12" :key="line" />
     </view>
@@ -101,7 +101,7 @@ export default {
     }
   }
 }
-.loading-circle {
+.loading-circular {
   display: inline-block;
   width: 28rpx;
   height: 28rpx;

components/pi-popup/index.vue

@@ -4,6 +4,7 @@
     :duration="duration"
     :append-to-body="appendToBody"
     :background="maskBackground"
+    :mask-closable="maskClosable"
     @close="handleCloseMask"
   >
     <view
@@ -17,13 +18,21 @@
       @tap.stop.prevent
     >
       <view
-        class="pi-w-100P pi-h-100P"
+        class="pi-rela pi-w-100P pi-h-100P"
         :class="{ 'pi-safearea': position !== 'top' && safeAreaInsetBottom }"
         :style="{
           background: background,
-          paddingTop: position !== 'bottom' && safeAreaInsetTop ? `${statusBarHeight}px` : 0
+          paddingTop: position !== 'bottom' && safeAreaInsetTop ? statusBarHeight : 0
         }"
       >
+        <view
+          v-if="showCloseIcon"
+          class="pi-abso pi-pd-24"
+          :class="'pi-icon-' + closeIconName"
+          :style="[closeIconStyle]"
+          @tap="handleCloseMask"
+        />
+        <!-- default slot -->
         <slot />
       </view>
     </view>
@@ -42,6 +51,11 @@ import { systemInfo } from '../../tools/system'
 import { getConfig } from '../../config'
 const TAG = 'PiPopup'
 const { popup } = getConfig()
+const {
+  screenHeight,
+  safeArea: { height: bodyHeight },
+  statusBarHeight
+} = systemInfo
 
 export default {
   name: TAG,
@@ -87,6 +101,39 @@ export default {
         return popup.popupStyle
       }
     },
+    // 是否可以通过点击遮罩进行关闭，默认（true）
+    maskClosable: {
+      type: Boolean,
+      default: popup.maskClosable
+    },
+    // 是否显示关闭图标，默认（true）
+    showCloseIcon: {
+      type: Boolean,
+      default: popup.showCloseIcon
+    },
+    // 关闭图标的名称，默认（close）
+    closeIconName: {
+      type: String,
+      default: popup.closeIconName
+    },
+    // 关闭图标的颜色，默认（'#999999'）
+    closeIconColor: {
+      type: String,
+      default: popup.closeIconColor
+    },
+    // 关闭图标的大小，默认（'32rpx'）
+    closeIconSize: {
+      type: [String, Number],
+      default: popup.closeIconSize
+    },
+    // 关闭图标位置，tl为左上角，tr为右上角，bl为左下角，br为右下角，若不指定，则按照弹出位置自动显示在合适的位置
+    closePosition: {
+      type: String,
+      default: popup.closePosition,
+      validator: function(value) {
+        return ['', 'tl', 'tr', 'bl', 'br'].includes(value)
+      }
+    },
     // 顶部安全适配（状态栏高度，默认true）
     safeAreaInsetTop: {
       type: Boolean,
@@ -105,7 +152,11 @@ export default {
   },
   computed: {
     statusBarHeight() {
-      return systemInfo.statusBarHeight
+      return `${statusBarHeight}px`
+    },
+    safeAreaBottom() {
+      const bottomHeight = screenHeight - statusBarHeight - bodyHeight
+      return `${bottomHeight}px`
     },
     positionStyle() {
       const positionStyleMap = {
@@ -122,6 +173,40 @@ export default {
         js: duration,
         css: `${duration / 1000}s`
       }
+    },
+    getClosePosition() {
+      // 若不指定，则按照弹出位置自动显示在合适的位置
+      const closePositionMap = {
+        top: 'br', // 右下角
+        bottom: 'tr', // 右上角
+        left: 'tr', // 右上角
+        right: 'tl' // 左上角
+      }
+      const closePosition = this.closePosition || closePositionMap[this.position]
+      return closePosition
+    },
+    closeIconStyle() {
+      const closePosition = this.getClosePosition
+      const top =
+        this.safeAreaInsetTop && this.position !== 'bottom' && closePosition.includes('t')
+          ? this.statusBarHeight
+          : 0
+      const bottom =
+        this.safeAreaInsetBottom && this.position !== 'top' && closePosition.includes('b')
+          ? this.safeAreaBottom
+          : 0
+      const positionStyleMap = {
+        tl: { top, left: 0 }, // 左上角
+        tr: { top, right: 0 }, // 右上角
+        bl: { bottom, left: 0 }, // 右下角
+        br: { bottom, right: 0 } // 右下角
+      }
+      const style = {
+        color: this.closeIconColor,
+        fontSize: this.$pi.common.addUnit(this.closeIconSize),
+        ...positionStyleMap[closePosition]
+      }
+      return style
     }
   },
   watch: {

config/loading.js

@@ -1,7 +1,7 @@
 export default {
   color: '#c1c1c1', // j颜色
   type: 'spinner', // 类型： spinner 菊花 circular 圆环
-  size: 38, // 尺寸，默认38rpx
+  size: 32, // 尺寸，默认32rpx
   vertical: false, // 是否垂直排列
   textSize: '28rpx', // 文字尺寸，默认28rpx
   textStyle: {}, // 文字样式

config/popup.js

@@ -6,6 +6,12 @@ export default {
   maskBackground: 'rgba(0, 0, 0, .5)', // 蒙层背景颜色（默认'#000000'）
   background: '#ffffff', // 背景颜色（默认'#ffffff'）
   popupStyle: {}, // 指定popupStyle样式（默认{}）
+  maskClosable: true, // 是否可以通过点击遮罩进行关闭，默认（true）
+  showCloseIcon: true, // 是否显示关闭图标，默认（true）
+  closeIconName: 'close', // 关闭图标的名称，默认（close）
+  closeIconColor: '#999999', // 关闭图标的颜色，默认（'#999999'）
+  closeIconSize: 36, // 关闭图标的大小，默认（'32rpx'）
+  closeIconPosition: '', // 关闭图标位置，tl为左上角，tr为右上角，bl为左下角，br为右下角，若不指定，则按照弹出位置自动显示在合适的位置
   safeAreaInsetTop: true, // 顶部安全适配（状态栏高度，默认true）
   safeAreaInsetBottom: true // 底部安全适配（iPhoneX 留出底部安全距离，默认true）
 }

tools/system.js

@@ -10,4 +10,9 @@ export const systemInfo = (() => {
 /**
  * 是否iPhone X系列机型
  */
-export const isIpx = () => systemInfo.model.includes('iPhone X')
+export const isIpx = (() => systemInfo.model.includes('iPhone X'))()
+
+/**
+ * 获取内部安全区域数据
+ */
+export const safeAreaInsets = (() => systemInfo.safeAreaInsets)()