mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
fix: 🐛 修复 Overlay 组件锁定背景滚动属性 lock-scroll 无法取消的问题 (#1149)
This commit is contained in:
不如摸鱼去
GitHub
parent
ed923ecf99
commit
f3ccf3d936
@ -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` | - | - | - |
|
||||
|
||||
@ -74,12 +74,30 @@
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------ | ------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------- | -------- |
|
||||
| show | 是否展示组件 | boolean | - | - | - |
|
||||
| name | 动画类型 | string | fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in | - | - |
|
||||
| duration | 动画执行时间 | number / boolean | - | 300(ms) | - |
|
||||
| custom-style | 自定义样式 | string | - | - | - |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
|--------------|--------------|------------------|----------------|---------|----------|
|
||||
| show | 是否展示组件 | boolean | - | - | - |
|
||||
| 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
|
||||
|
||||
|
||||
@ -72,14 +72,31 @@ When the animation leaves, the tag will be set with `leave-class` and `leave-act
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
## Attributes
|
||||
|
||||
| Parameter | Description | Type | Options | Default | Version |
|
||||
|-----------|-------------|------|----------|---------|----------|
|
||||
| show | Whether to display 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 | - | - |
|
||||
| duration | Animation execution time | number / boolean | - | 300(ms) | - |
|
||||
| custom-style | Custom style | string | - | - | - |
|
||||
| Parameter | Description | Type | Optional Values | Default Value | Minimum Version |
|
||||
|--------------------|------------------------------------|------------------|------------------|---------------|------------------|
|
||||
| show | Whether to display the component | boolean | - | - | - |
|
||||
| name | Animation type | string | `TransitionName` | - | - |
|
||||
| duration | Animation duration | number / boolean | - | 300(ms) | - |
|
||||
| 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
|
||||
|
||||
|
||||
@ -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 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
.content {
|
||||
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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user