Skip to content

Commit

Permalink
fix(overlay)!: 小程序与 APP平台不再支持lock-scroll属性
Browse files Browse the repository at this point in the history 
小程序移除`lock-scroll`属性支持

BREAKING CHANGE: 小程序移除`lock-scroll`属性支持

所有依赖overlay的组件的`lock-scroll`属性同理也将不再支持小程序与 APP 平台,禁用滚动穿透方法可参考文档

closed #103
  • Loading branch information
@yang1206
yang1206 committed Nov 14, 2023
1 parent 71c4ceb commit cd3a740
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 27 deletions.
63 changes: 48 additions & 15 deletions docs/components/basic/overlay.md
View file
Expand Up @@ -81,26 +81,59 @@

### 锁定背景滚动

通过 `lock-scroll` 设置遮罩在显示时是否锁定背景，禁止滚动
通过 `lock-scroll` 设置遮罩在显示时是否锁定背景，禁止滚动, 这个属性仅支持 H5

```vue
<script lang="ts">
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
show: false
})
return {
...toRefs(state)
}
}
}
</script>
```html
<template>
<nut-button type="primary" @click="show = true">锁定背景滚动</nut-button>
<nut-overlay v-model:visible="show" :lock-scroll="true"></nut-overlay>
<nut-button type="primary" @click="show = true">
锁定背景滚动
</nut-button>
<nut-overlay v-model:visible="show" :lock-scroll="true" />
</template>
```

### 锁定背景滚动 (小程序与 APP)

`lock-scroll`属性仅能在 H5生效，因为在 uniapp中没有办法有效的控制，因此我们只能使用官方提供的[方法](https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html#%E7%A6%81%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%A9%BF%E9%80%8F), 通过`page-meta`标签控制

```vue
<script lang="ts">
import { reactive, toRefs} from 'vue';
export default {
setup() {
const state = reactive({
show: false
});
return {
...toRefs(state)
};
import { reactive, toRefs } from 'vue'
export default {
setup() {
const state = reactive({
show: false
})
return {
...toRefs(state)
}
};
}
}
</script>
<template>
<page-meta :page-style="`overflow:${show ? 'hidden' : 'visible'}`" />
<view class="container">
<!-- 普通弹窗 -->
<nut-overlay v-model:visible="show" />
</view>
</template>
```

### 嵌套内容
Expand Down Expand Up @@ -206,7 +239,7 @@
| duration | 显示/隐藏的动画时长，单位毫秒 | string \| number | `300` |
| overlay-class | 自定义遮罩类名 | string | - |
| overlay-style | 自定义遮罩样式 | CSSProperties | - |
| lock-scroll | 遮罩显示时的背景是否锁定 | boolean | `true` |
| lock-scroll `H5` | 遮罩显示时的背景是否锁定 | boolean | `true` |
| close-on-click-overlay | 点击遮罩时是否关闭 | boolean | `true` |

### Events
Expand Down
2 changes: 1 addition & 1 deletion docs/components/basic/popup.md
View file
Expand Up @@ -151,7 +151,7 @@
| v-model:visible | 控制当前组件显示/隐藏 | boolean | `false` |
| z-index | 遮罩层级 | string \| number | `2000` |
| duration | 组件显示/隐藏的动画时长，单位秒 | string \| number | `0.3` |
| lock-scroll | 背景是否锁定 | boolean | `true` |
| lock-scroll `H5` | 背景是否锁定 | boolean | `true` |
| overlay | 是否显示遮罩 | boolean | `true` |
| close-on-click-overlay | 是否点击遮罩关闭 | boolean | `true` |
| position | 弹出位置（top,bottom,left,right,center） | string | `"center"` |
Expand Down
2 changes: 1 addition & 1 deletion docs/components/business/timeselect.md
View file
Expand Up @@ -294,7 +294,7 @@
| title | 弹层标题 | string | `取件时间`
| current-key | 唯一标识 | string \| number | `0`
| current-time | 当前选择的时间，数组元素包含:key: string; list: string[] | Array | `[]`
| lock-scroll | 背景是否锁定 | boolean | `true` |
| lock-scroll `H5` | 背景是否锁定 | boolean | `true` |

### Slots

Expand Down
2 changes: 1 addition & 1 deletion docs/components/feedback/dialog.md
View file
Expand Up @@ -136,7 +136,7 @@ export default {
| cancel-auto-close | 取消按钮是否默认关闭弹窗 | boolean | `true` |
| text-align | 文字对齐方向，可选值同 `css` 的 `text-align` | string | `"center"` |
| close-on-popstate | 是否在页面回退时自动关闭 | boolean | `false` |
| lock-scroll | 背景是否锁定 | boolean | `true` |
| lock-scroll `H5` | 背景是否锁定 | boolean | `true` |
| footer-direction | 使用横纵方向 可选值 `horizontal`、`vertical` | string | `horizontal` |
| overlay-class | 自定义遮罩类名 | string | - |
| overlay-style | 自定义遮罩样式 | CSSProperties | - |
Expand Down
2 changes: 1 addition & 1 deletion docs/components/nav/menu.md
View file
Expand Up @@ -352,7 +352,7 @@ export default {
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | boolean | `true` |
| scroll-fixed | 滚动后是否固定，可设置固定位置 | boolean \| string \| number | `false` |
| title-class | 自定义标题样式类 | string | - |
| lock-scroll`H5/WEAPP` | 背景是否锁定 | boolean | `true` |
| lock-scroll `H5` | 背景是否锁定 | boolean | `true` |
| title-icon | 自定义标题图标 | string | - |
| direction | 展开方向，可选值为`up` `down` | string | - |
| up-icon | 收起的图标 | string | `rect-up` |
Expand Down
4 changes: 0 additions & 4 deletions packages/nutui/components/overlay/overlay.vue
View file
Expand Up @@ -34,9 +34,6 @@ watchEffect(() => {
props.visible ? lock() : unlock()
})
// #endif
function toMoveHandle() {
}
</script>

<script lang="ts">
Expand All @@ -59,7 +56,6 @@ export default defineComponent({
:custom-class="[overlayClass, classes]"
:duration="Number(props.duration)"
@click="onClick"
@touchmove.stop.prevent="props.lockScroll ? toMoveHandle : ''"
>
<slot />
<!-- </view> -->
Expand Down
4 changes: 0 additions & 4 deletions packages/nutui/components/popup/popup.vue
View file
Expand Up @@ -9,9 +9,6 @@ import { usePopup } from './use-popup'
const props = defineProps(popupProps)
const emit = defineEmits(popupEmits)
function toMoveHandle() {
}
const { onClickOverlay, showSlot, onClickCloseIcon, closed, transitionName, onOpened, onClosed, classes, popStyle, onClick } = usePopup(props, emit)
</script>

Expand Down Expand Up @@ -51,7 +48,6 @@ export default defineComponent({
@after-enter="onOpened"
@after-leave="onClosed"
@click="onClick"
@touchmove.stop.prevent="props.lockScroll ? toMoveHandle : ''"
>
<slot v-if="showSlot" />
<view
Expand Down

0 comments on commit cd3a740

Please sign in to comment.