feat: 新增select组件

common.scss

@@ -689,6 +689,7 @@
     @extend .pi-rela;
     @extend .pi-flex-nowrap;
     @extend .pi-justify-between;
+    @extend .pi-align-center;
     @extend .pi-bg-white;
 
     transition: all $pi-animation-duration ease-in-out;

components/pi-base-popup-demo/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <pi-popup
+    :value="val"
+    :mask="popup.mask"
+    :z-index="popup.zIndex"
+    :border-radius="popup.borderRadius"
+    :show-close-icon="popup.showCloseIcon"
+    :close-icon-name="popup.closeIconName"
+    :close-icon-padding="popup.closeIconPadding"
+    :close-icon-color="popup.closeIconColor"
+    :close-icon-size="popup.closeIconSize"
+    :close-icon-position="popup.closeIconPosition"
+    :safe-area-inset-bottom="popup.safeAreaInsetBottom"
+    :mask-closable="popup.maskClosable"
+    :hide-tab-bar="popup.hideTabBar"
+    @close="handlePopupClose"
+  />
+</template>
+
+<script>
+import ValueSync from '../../mixin/value-sync'
+import { getConfig } from '../../config'
+import { createCustomPropsByConfig } from '../../mixin/component-custom'
+const TAG = 'PiBasePopupDemo'
+const { demo } = getConfig()
+
+export default {
+  name: TAG,
+  // 混入v-model
+  // 混入自定义样式customStyle和customClass
+  mixins: [ValueSync, createCustomPropsByConfig(demo)],
+  props: {
+    // 弹窗的配置，默认选项请参照popup
+    popup: {
+      type: Object,
+      default() {
+        return calendar.popup
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    handlePopupClose() {
+      this.val = false
+      this.$emit('close')
+      this.handleEmitChange()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pi-select {
+}
+</style>

components/pi-button/index.vue

@@ -2,7 +2,7 @@
   <button
     class="pi-button fix-webkit-appearance"
     :style="[customStyle]"
-    :class="[customClass, round ? 'pi-round' : '']"
+    :class="[customClass, { round: round }]"
     :size="size"
     :type="type"
     :plain="plain"
@@ -29,12 +29,9 @@
     @launchapp="$emit('launchapp', $event)"
   >
     <slot />
-    <view
-      v-if="ripple"
-      class="wave-ripple"
-      :class="{ active: waveInfo.active }"
-      :style="[waveStyle]"
-    />
+    <view v-if="ripple" class="pi-abso-full" :class="[{ round: round }]">
+      <view class="wave-ripple" :class="[{ active: waveInfo.active }]" :style="[waveStyle]" />
+    </view>
   </button>
 </template>
 
@@ -263,10 +260,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// 按钮样式修改
+.round {
+  overflow: hidden;
+  border-radius: 500000rpx;
+}
+
 .pi-button {
   position: relative;
   border: 0;
+  // 椭圆
+  &.round {
+    &::after {
+      @extend .round;
+    }
+  }
   // 默认尺寸
   &[size='default'] {
     height: $pi-button-default-height;
@@ -305,6 +312,7 @@ export default {
   .wave-ripple {
     position: absolute;
     z-index: 0;
+    overflow: hidden;
     pointer-events: none;
     user-select: none;
     background-clip: padding-box;

components/pi-calendar/index.vue

@@ -1,18 +1,20 @@
 <template>
   <pi-popup
     :value="val"
-    :mask="popup.mask"
-    :z-index="popup.zIndex"
-    :border-radius="popup.borderRadius"
-    :show-close-icon="popup.showCloseIcon"
-    :close-icon-name="popup.closeIconName"
-    :close-icon-padding="popup.closeIconPadding"
-    :close-icon-color="popup.closeIconColor"
-    :close-icon-size="popup.closeIconSize"
-    :close-icon-position="popup.closeIconPosition"
-    :safe-area-inset-bottom="popup.safeAreaInsetBottom"
-    :mask-closable="popup.maskClosable"
-    :hide-tab-bar="popup.hideTabBar"
+    :border-radius="borderRadius"
+    :show-close-icon="showCloseIcon"
+    :close-icon-name="closeIconName"
+    :close-icon-padding="closeIconPadding"
+    :close-icon-color="closeIconColor"
+    :close-icon-size="closeIconSize"
+    :close-icon-position="closeIconPosition"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :duration="duration"
+    :mask-closable="maskClosable"
+    :hide-tab-bar="hideTabBar"
+    :append-to-body="appendToBody"
+    :z-index="zIndex"
+    :mask-background="maskBackground"
     @close="handlePopupClose"
   >
     <view class="pi-calendar" :style="[customStyle]" :class="[customClass]">
@@ -110,17 +112,17 @@ export default {
   // 混入自定义样式customStyle和customClass
   mixins: [ValueSync, createCustomPropsByConfig(calendar)],
   props: {
-    // 弹窗的配置，默认选项请参照popup
-    popup: {
-      type: Object,
-      default() {
-        return calendar.popup
-      }
+    // 是否显示title（默认：true）
+    showTitle: {
+      type: Boolean,
+      default: calendar.showTitle
     },
+    // 标题（默认：日期选择）
     title: {
       type: String,
       default: calendar.title
     },
+    // 标题 padding（默认：24rpx）
     titlePadding: {
       type: [String, Number],
       default: calendar.titlePadding
@@ -207,6 +209,96 @@ export default {
     dateFormat: {
       type: String,
       default: calendar.dateFormat
+    },
+    /**
+     * 弹窗的配置，默认选项请参照popup
+     * -------------------------------------------------------------------------------------------------
+     */
+    // 控制弹窗的四个角圆角效果（默认'0 0 0 0'）
+    borderRadius: {
+      type: [String, Number],
+      default: '0 0 0 0'
+    },
+    // 是否显示关闭图标，默认（true）
+    showCloseIcon: {
+      type: Boolean,
+      default: calendar.showCloseIcon
+    },
+    // 关闭图标的名称，默认（close）
+    closeIconName: {
+      type: String,
+      default: calendar.closeIconName
+    },
+    closeIconPadding: {
+      type: [String, Number],
+      default: calendar.closeIconPadding
+    },
+    // 关闭图标的颜色，默认（'#c9c9c9'）
+    closeIconColor: {
+      type: String,
+      default: calendar.closeIconColor
+    },
+    // 关闭图标的大小，默认（'42rpx'）
+    closeIconSize: {
+      type: [String, Number],
+      default: calendar.closeIconSize
+    },
+    closeIconWeight: {
+      type: [String, Number],
+      default: calendar.closeIconWeight
+    },
+    // 关闭图标位置，tl为左上角，tr为右上角，bl为左下角，br为右下角，若不指定，则按照弹出位置自动显示在合适的位置
+    closeIconPosition: {
+      type: String,
+      default: calendar.closeIconPosition,
+      validator: function(value) {
+        return ['', 'tl', 'tr', 'bl', 'br'].includes(value)
+      }
+    },
+    // 顶部安全适配（状态栏高度，默认true）
+    safeAreaInsetTop: {
+      type: Boolean,
+      default: calendar.safeAreaInsetTop
+    },
+    // 底部安全适配（iPhoneX 留出底部安全距离，默认true）
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: calendar.safeAreaInsetBottom
+    },
+    /**
+     * mask props
+     * -------------------------------------------------------------------------------------------------
+     */
+    // 遮罩的过渡时间，单位为ms，默认（500）
+    duration: {
+      type: [Number, String],
+      default: calendar.duration
+    },
+    // 是否可以通过点击遮罩进行关闭，默认（true）
+    maskClosable: {
+      type: Boolean,
+      default: calendar.maskClosable
+    },
+    // 是否隐藏TabBar，默认（false）
+    hideTabBar: {
+      required: false,
+      type: Boolean,
+      default: calendar.hideTabBar
+    },
+    // 是否挂载到body下，防止嵌套层级无法遮罩的问题（仅H5环境生效）,默认（false）
+    appendToBody: {
+      type: Boolean,
+      default: calendar.appendToBody
+    },
+    // 层级z-index，（默认1000）
+    zIndex: {
+      type: [Number, String],
+      default: calendar.zIndex
+    },
+    // 背景颜色（默认'rgba(0, 0, 0, .5)'）
+    maskBackground: {
+      type: String,
+      default: calendar.maskBackground
     }
   },
   data() {
@@ -306,6 +398,7 @@ export default {
         // 当天样式
         if (this.showBackToday && this.isSameDay(this.now, day)) {
           day.nowStyle = {
+            color: this.todayActiveBorderColor,
             border: '1px solid ' + this.todayActiveBorderColor,
             borderRadius: this.getActiveBorderRadius
           }

components/pi-mask/index.vue

@@ -9,7 +9,7 @@
       { 'zIndex': zIndex, 'background': background, 'animation-duration': getDuration.css }
     ]"
     @touchmove.stop.prevent
-    @tap="handleCloseMask"
+    @tap.stop.prevent="handleCloseMask"
   >
     <slot />
   </view>
@@ -78,7 +78,8 @@ export default {
   },
   data() {
     return {
-      show: false
+      show: false,
+      showed: false // 是否动画执行完毕
     }
   },
   computed: {
@@ -110,31 +111,37 @@ export default {
     openMask() {
       if (this.show) return
       console.log(TAG, '显示遮罩层')
+      this.showed = false
       this.show = true
       this.handleEmitChange()
       uni.hideKeyboard()
       this.hideTabBar && uni.hideTabBar()
+      setTimeout(() => {
+        this.showed = true
+        console.log(TAG, '遮罩层已显示')
+      }, this.getDuration.js)
       // #ifdef H5
       if (this.appendToBody) {
-        console.log(this.$el)
         document.body.appendChild(this.$el)
       }
       // #endif
     },
     closeMask() {
-      if (!this.show) return
+      if (!this.show || !this.showed) return
       console.log(TAG, '关闭遮罩层')
       this.show = false
+      this.showed = false
       this.$emit('close')
       setTimeout(() => {
-        this.val = false
         this.$emit('closed')
+        this.val = false
         this.handleEmitChange()
         this.hideTabBar && uni.showTabBar()
+        console.log(TAG, '遮罩层已关闭')
       }, this.getDuration.js)
     },
     handleCloseMask() {
-      if (!this.maskClosable || !this.show) return
+      if (!this.maskClosable) return
       this.closeMask()
     }
   }