fix: 🐛 修复 Overlay 组件锁定背景滚动属性 lock-scroll 无法取消的问题 (#1149)

docs/component/overlay.md

@@ -45,6 +45,6 @@
 | ----------- | ------------------ | ----------------- | ------ | ------ | -------- |
 | show        | 是否展示遮罩层     | `boolean`         | true   | false  | -        |
 | duration    | 动画时长，单位毫秒 | `string / number` | -      | 300    | -        |
-| lockScroll  | 是否锁定滚动       | `boolean`         | false  | true   | -        |
+| lockScroll  | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | `boolean`         | false  | true   | -        |
 | zIndex      | 层级               | `number`          | -      | 10     | -        |
 | customStyle | 自定义样式         | `string`          | -      | -      | -        |

docs/component/transition.md

@@ -75,11 +75,29 @@
 ## Attributes
 
 | 参数         | 说明         | 类型             | 可选值         | 默认值  | 最低版本 |
-| ------------ | ------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | -------- |
+|--------------|--------------|------------------|----------------|---------|----------|
 | show         | 是否展示组件 | boolean          | -              | -       | -        |
-| name         | 动画类型     | string           | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | -       | -        |
+| name         | 动画类型     | string           | `TransitionName` | -       | -        |
 | duration     | 动画执行时间 | number / boolean | -              | 300(ms) | -        |
 | custom-style | 自定义样式   | string           | -              | -       | -        |
+| disable-touch-move | 是否阻止触摸滚动 | boolean | -              | false   | $LOWEST_VERSION$ |
+
+### TransitionName 动画类型
+
+| 名称        | 说明         | 最低版本 |
+|-------------|--------------|----------|
+| fade        | 淡入淡出     | -        |
+| fade-down   | 向下淡入淡出 | -        |
+| fade-left   | 向左淡入淡出 | -        |
+| fade-right  | 向右淡入淡出 | -        |
+| fade-up     | 向上淡入淡出 | -        |
+| slide-down  | 向下滑动     | -        |
+| slide-left  | 向左滑动     | -        |
+| slide-right | 向右滑动     | -        |
+| slide-up    | 向上滑动     | -        |
+| zoom-in     | 缩放进入     | -        |
+| zoom-out    | 缩放离开     | -        |
+
 
 ## Events
 

docs/en-US/component/transition.md

@@ -74,12 +74,29 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
 
 ## Attributes  
 
-| Parameter | Description | Type | Options | Default | Version |
+| Parameter          | Description                        | Type             | Optional Values  | Default Value | Minimum Version  |
-|-----------|-------------|------|----------|---------|----------|
+|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
-| show | Whether to display component | boolean | - | - | - |
+| show               | Whether to display the component   | boolean          | -                | -             | -                |
-| name | Animation type | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
+| name               | Animation type                     | string           | `TransitionName` | -             | -                |
-| duration | Animation execution time | number / boolean | - | 300(ms) | - |
+| duration           | Animation duration                 | number / boolean | -                | 300(ms)       | -                |
-| custom-style | Custom style | string | - | - | - |
+| custom-style       | Custom styles                      | string           | -                | -             | -                |
+| disable-touch-move | Whether to prevent touch scrolling | boolean          | -                | false         | $LOWEST_VERSION$ |
+
+### TransitionName Animation Types  
+
+| Name        | Description     | Minimum Version |
+|-------------|-----------------|-----------------|
+| fade        | Fade in and out | -               |
+| fade-down   | Fade down       | -               |
+| fade-left   | Fade left       | -               |
+| fade-right  | Fade right      | -               |
+| fade-up     | Fade up         | -               |
+| slide-down  | Slide down      | -               |
+| slide-left  | Slide left      | -               |
+| slide-right | Slide right     | -               |
+| slide-up    | Slide up        | -               |
+| zoom-in     | Zoom in         | -               |
+| zoom-out    | Zoom out        | -               |
 
 ## Events
 

src/subPages/overlay/Index.vue

@@ -12,9 +12,16 @@
     </page-wraper>
     <wd-overlay :show="show" @click="show = false" />
 
-    <wd-overlay :show="show1" @click="show1 = false">
+    <wd-overlay :show="show1" @click="show1 = false" :lock-scroll="lockScroll">
       <view class="wrapper">
-        <view class="block" @click.stop="" />
+        <view class="content" @click.stop="">
+          <demo-block title="是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动" transparent>
+            <wd-switch v-model="lockScroll" size="22px" />
+          </demo-block>
+          <view class="scroll">
+            <view class="block" v-for="i in 10" :key="i" @click.stop="">{{ i }}</view>
+          </view>
+        </view>
       </view>
     </wd-overlay>
   </view>
@@ -24,21 +31,33 @@ import { ref } from 'vue'
 
 const show = ref<boolean>(false)
 const show1 = ref<boolean>(false)
+const lockScroll = ref<boolean>(true)
 </script>
 <style lang="scss" scoped>
-.wot-theme-dark {
-}
-
 .wrapper {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
 
-.block {
+.content {
-  width: 120px;
-  height: 120px;
   background-color: #fff;
+  border-radius: 12px;
+}
+
+.scroll {
+  height: 50vh;
+  overflow-y: auto;
+  width: 300px;
+}
+
+.block {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue

@@ -5,8 +5,8 @@
     custom-class="wd-overlay"
     :duration="duration"
     :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    :disable-touch-move="lockScroll"
     @click="handleClick"
-    @touchmove.stop.prevent="lockScroll ? noop : ''"
   >
     <slot></slot>
   </wd-transition>
@@ -37,8 +37,6 @@ function handleClick() {
   emit('click')
 }
 
-function noop() {}
-
 // #ifdef H5
 useLockScroll(() => props.show && props.lockScroll)
 // #endif

src/uni_modules/wot-design-uni/components/wd-transition/types.ts

@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2024-09-01 15:42:04
- * @LastEditTime: 2024-11-06 23:50:08
+ * @LastEditTime: 2025-07-04 18:33:43
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-transition\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-transition/types.ts
  * 记得注释
  */
 import type { ExtractPropTypes, PropType } from 'vue'
@@ -95,7 +95,13 @@ export const transitionProps = {
    * 离开过渡的结束状态
    * 类型：string
    */
-  leaveToClass: makeStringProp('')
+  leaveToClass: makeStringProp(''),
+  /**
+   * 是否阻止触摸滚动
+   * 类型：boolean
+   * 默认值：false
+   */
+  disableTouchMove: makeBooleanProp(false)
 }
 
 export type TransitionProps = ExtractPropTypes<typeof transitionProps>

src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue

@@ -1,5 +1,15 @@
 <template>
-  <view v-if="!lazyRender || inited" :class="rootClass" :style="style" @transitionend="onTransitionEnd" @click="handleClick">
+  <view
+    :class="rootClass"
+    :style="style"
+    @transitionend="onTransitionEnd"
+    @click="handleClick"
+    @touchmove.stop.prevent="noop"
+    v-if="isShow && disableTouchMove"
+  >
+    <slot />
+  </view>
+  <view :class="rootClass" :style="style" @transitionend="onTransitionEnd" @click="handleClick" v-else-if="isShow && !disableTouchMove">
     <slot />
   </view>
 </template>
@@ -82,6 +92,10 @@ const rootClass = computed(() => {
   return `wd-transition ${props.customClass}  ${classes.value}`
 })
 
+const isShow = computed(() => {
+  return !props.lazyRender || inited.value
+})
+
 onBeforeMount(() => {
   if (props.show) {
     enter()
@@ -210,6 +224,8 @@ function onTransitionEnd() {
     display.value = false
   }
 }
+
+function noop() {}
 </script>
 <style lang="scss" scoped>
 @import './index.scss';