fix: 修复 f-popup 组件内容部分超出不显示滚动条问题

CHANGELOG.md

@@ -3,6 +3,10 @@
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
 - 修复 `f-button` 组件部分参数响应式丢失问题
+- 修复 `f-drawer` 组件内容部分超出不显示滚动条问题
+- 修复 `f-popup` 组件内容部分超出不显示滚动条问题
+
+- `f-popup` 组件 `z-index` 配置项默认值改为 null
 
 ## 0.40.3 (2023-05-22)
 

packages/fighting-design/_hooks/use-props/index.ts

@@ -5,11 +5,13 @@ import type { Ref } from 'vue'
 /**
  * 带有回调的 filter 方法类型接口
  *
- * @param { String } key prop 的键
+ * @param { string } key prop 的键
+ * @param { string } actualKey 转换的 prop 的键
  * @param { Function } callback 验证回调
  */
 export interface FilterParamsList {
   key: string
+  actualKey?: string
   callback: () => boolean
 }
 
@@ -71,7 +73,7 @@ export const useProps = <T extends object>(prop: T): UsePropsReturn => {
          * 如果为真才过滤该属性
          */
         if (item.callback && item.callback()) {
-          result[item.key] = toRef(prop, item.key as never)
+          result[item.actualKey || item.key] = toRef(prop, item.key as never)
         }
       }
     })

packages/fighting-design/popup/src/popup.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
   import { Props } from './props'
-  import { computed } from 'vue'
-  import { sizeChange } from '../../_utils'
-  import { useRun } from '../../_hooks'
+  import { useRun, useList } from '../../_hooks'
   import { EMIT_VISIBLE } from '../../_tokens'
-  import type { CSSProperties } from 'vue'
+  import type { FilterParamsList } from '../../_hooks'
+  import type { PopupDirection } from './interface'
 
   defineOptions({ name: 'FPopup' })
 
   const prop = defineProps(Props)
   const emit = defineEmits([EMIT_VISIBLE])
 
   const { run } = useRun()
+  const { classes, styles } = useList(prop, 'popup')
 
   /** 点击遮罩层关闭 */
   const closePopup = (): void => {
@@ -58,22 +58,35 @@
     run(prop.onCloseEnd, node)
   }
 
-  /** 样式列表 */
-  const styleList = computed((): CSSProperties => {
-    const { direction, popupSize, padding } = prop
-
-    if (direction === 'top' || direction === 'bottom') {
-      return {
-        height: sizeChange(popupSize),
-        padding: sizeChange(padding)
-      } as const
+  /**
+   * 计算尺寸抽离方法
+   *
+   * @param { string } actualKey 实际要转换成为的 key
+   * @param { Array } directions 方向规则
+   */
+  const computedSize = (
+    actualKey: string,
+    directions: PopupDirection[]
+  ): FilterParamsList => {
+    return {
+      key: 'popupSize',
+      actualKey: actualKey,
+      callback: (): boolean => directions.includes(prop.direction)
     }
+  }
 
-    return {
-      width: sizeChange(popupSize),
-      padding: sizeChange(padding)
-    } as const
-  })
+  /** 类名列表 */
+  const classList = classes(['maskBlur', 'direction', 'fullscreen'], 'f-popup')
+
+  /** 样式列表 */
+  const styleList = styles([
+    'zIndex',
+    'maskBackground',
+    'maskOpacity',
+    'padding',
+    computedSize('height', ['top', 'bottom']),
+    computedSize('width', ['left', 'right'])
+  ])
 </script>
 
 <template>
@@ -85,37 +98,15 @@
       @before-leave="handleClose"
       @after-leave="handleCloseEnd"
     >
-      <div v-show="visible" class="f-popup" :style="{ zIndex }">
+      <div v-show="visible" :class="classList" :style="styleList">
         <!-- 遮罩层 -->
-        <div
-          v-if="showMask"
-          :class="['f-popup__mask', { 'f-popup__blur': maskBlur }]"
-          :style="{ background: maskBackground, opacity: maskOpacity }"
-        />
+        <div v-if="showMask" class="f-popup__mask" />
 
         <!-- 主容器 -->
-        <div
-          :class="[
-            'f-popup__container',
-            {
-              [`f-popup__container-${direction}`]: direction
-            }
-          ]"
-          @click.self="closePopup"
-        >
+        <div class="f-popup__container" @click.self="closePopup">
           <!-- 主内容 -->
           <transition name="f-popup__wrapper-transition">
-            <div
-              v-show="visible"
-              :class="[
-                'f-popup__wrapper',
-                {
-                  [`f-popup__wrapper-${direction}`]: direction,
-                  'f-popup__fullscreen': fullscreen
-                }
-              ]"
-              :style="styleList"
-            >
+            <div v-show="visible" class="f-popup__wrapper">
               <slot />
             </div>
           </transition>

packages/fighting-design/popup/src/props.ts

@@ -27,7 +27,7 @@ export const Props = {
    *
    * @see z-index https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index
    */
-  zIndex: setNumberProp(1999),
+  zIndex: setNumberProp(),
   /** 自定义遮罩层背景色 */
   maskBackground: setStringProp(),
   /** 遮罩层透明度 */

packages/fighting-theme/src/popup.scss

@@ -4,7 +4,7 @@
   right: 0;
   left: 0;
   bottom: 0;
-  z-index: 2000;
+  z-index: var(--popup-z-index, 2000);
 
   // 遮罩层
   &__mask {
@@ -13,12 +13,13 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(0, 0, 0, 0.4);
+    opacity: var(--popup-mask-opacity, 0.4);
+    background-color: var(--popup-mask-background, #000);
+  }
 
-    // 高斯谋划
-    &.f-popup__blur {
-      backdrop-filter: blur(2px);
-    }
+  // 高斯模糊遮罩层
+  &__mask-blur .f-popup__mask {
+    backdrop-filter: blur(2px);
   }
 
   // 主容器公共样式
@@ -35,16 +36,12 @@
     .f-popup__wrapper {
       position: absolute;
       box-sizing: border-box;
+      overflow-x: auto;
       background-color: #fff;
+      width: var(--popup-width);
+      height: var(--popup-height);
+      padding: var(--popup-padding);
 
-      // 全屏状态
-      &.f-popup__fullscreen {
-        max-height: 100vh;
-        max-width: 100vw;
-        width: 100vw;
-        height: 100vh;
-        border-radius: 0;
-      }
 
       // 主内容动画样式
       &-transition-enter-active,
@@ -59,8 +56,17 @@
     }
   }
 
+  &__fullscreen.f-popup__center .f-popup__container .f-popup__wrapper,
+  &__fullscreen .f-popup__container .f-popup__wrapper {
+    max-height: 100vh;
+    max-width: 100vw;
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
+
   // 主容器居中
-  &__container-center {
+  &__center .f-popup__container {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -78,7 +84,7 @@
   }
 
   // 左侧弹出
-  &__container-left {
+  &__left .f-popup__container {
     .f-popup__wrapper {
       top: 0;
       bottom: 0;
@@ -92,7 +98,7 @@
   }
 
   // 右侧弹出
-  &__container-right {
+  &__right .f-popup__container {
     .f-popup__wrapper {
       top: 0;
       bottom: 0;
@@ -106,7 +112,7 @@
   }
 
   // 上方弹出
-  &__container-top {
+  &__top .f-popup__container {
     .f-popup__wrapper {
       top: 0;
       left: 0;
@@ -120,7 +126,7 @@
   }
 
   // 下方弹出
-  &__container-bottom {
+  &__bottom {
     .f-popup__wrapper {
       bottom: 0;
       left: 0;

start/src/App.vue

@@ -1,35 +1,26 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import type { DrawerDirection } from 'fighting-design'
+  import type { PopupDirection } from 'fighting-design'
 
-  const visible1 = ref(false)
-  const direction = ref<DrawerDirection>('right')
+  const visible2 = ref(false)
+  const direction = ref<PopupDirection>('center')
 
-  const onShow = (dir: DrawerDirection): void => {
+  const onShow = (dir: PopupDirection) => {
     direction.value = dir
-    visible1.value = true
+    visible2.value = true
   }
 </script>
 
 <template>
   <f-space>
+    <f-button type="primary" @click="onShow('center')">居中弹出</f-button>
     <f-button type="primary" @click="onShow('left')">从左往右开</f-button>
     <f-button type="primary" @click="onShow('right')">从右往左开</f-button>
     <f-button type="primary" @click="onShow('top')">从上往下开</f-button>
     <f-button type="primary" @click="onShow('bottom')">从下往上开</f-button>
   </f-space>
 
-  <f-drawer
-    v-model:visible="visible1"
-    title="Title"
-    :direction="direction"
-    fullscreen
-  >
-    <template #footer>
-      <f-button type="primary" @click="onShow('top')">从上往下开</f-button>
-      <f-button type="primary" @click="onShow('bottom')">从下往上开</f-button>
-    </template>
-
+  <f-popup v-model:visible="visible2" :direction="direction" :padding="30" mask-background="red" popup-size="200px">
     <h3>沁园春·雪</h3>
 
     <p>北国风光，千里冰封，万里雪飘。</p>
@@ -42,11 +33,11 @@
     <p>江山如此多娇，引无数英雄竞折腰。</p>
     <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
     <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
-    <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
-    <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
-    <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
-    <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
-    <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
     <p>俱往矣，数风流人物，还看今朝。</p>
-  </f-drawer>
+    <p>俱往矣，数风流人物，还看今朝。</p>
+    <p>俱往矣，数风流人物，还看今朝。</p>
+    <p>俱往矣，数风流人物，还看今朝。</p>
+    <p>俱往矣，数风流人物，还看今朝。</p>
+    <p>俱往矣，数风流人物，还看今朝。</p>
+  </f-popup>
 </template>