diff --git a/docs/component/uniui/uni-popup.md b/docs/component/uniui/uni-popup.md index abbb41723dfa478e2c1a792e8ef01f1d12627600..f9ea37ffc43c60f5c05239097b8d673b8df2ca7f 100644 --- a/docs/component/uniui/uni-popup.md +++ b/docs/component/uniui/uni-popup.md @@ -19,6 +19,7 @@ > - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目 > - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿 > - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏 +> - app-vue 中组件无法遮盖 video ,ad 等原生组件 ,建议使用 nvue > - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"` ### 基本用法 @@ -104,7 +105,9 @@ export default { |:-:|:-:|:-:|:-:| |animation|Boolean|true|是否开启动画| |type|String|'center'|弹出方式| -|mask-click|Boolean|true|蒙版点击是否关闭弹窗| +|mask-click**[即将废弃]**|Boolean|true|蒙版点击是否关闭弹窗| +|is-mask-click|Boolean|true|蒙版点击是否关闭弹窗| +|mask-background-color|rgba|rgba(0,0,0,0.4)|蒙版颜色,建议使用 rgba 颜色值| |background-color|String|'none'|主窗口背景色| |safe-area|Boolean|true|是否适配底部安全区| @@ -228,6 +231,8 @@ export default { |mode|String|base| 对话框模式,可选值:base(提示对话框)/input(可输入对话框)| |title|String|-|对话框标题| |content|String|-|对话框内容,base模式下生效| +|confirmText|String|-|定义确定按钮文本| +|cancelText|String|-|定义取消按钮文本| |value| String\Number|-|输入框默认值,input模式下生效| |placeholder|String|-|输入框提示文字,input模式下生效| |before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法| @@ -275,6 +280,57 @@ export default { **Tips** - share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改 + + +## 禁止滚动穿透 + +使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。 + +但由于平台自身原因,除了h5平台外 ,其他平台都不能在在组件内禁止滚动穿透,所以在微信小程序、App 平台,页面内需要用户特殊处理一下 + +### 微信小程序/App +在 `微信小程序/App` 平台可使用 `page-meta` 组件动态修改页面样式 , + +需要在 data 中定义一个变量,用来表示 `uni-popup` 的开启关闭状态,并通过这个变量修改 `page-meta` 的 `overflow` 属性。 + +在 `uni-popup` 的 `@change` 事件中可以接受到 `uni-popup` 的开启关闭状态 ,并赋值给上面的变量 + +**下面是关键代码片段:** + +```html + + + + +``` + +**Tips** +- h5 滚动穿透不需要处理 +- wx、app 需要 使用 page-meta 组件配合阻止滚动穿透 +- 注意 page-meta 组件,一个页面只能存在一个 +- 其他平台无法阻止滚动穿透,建议使用 scroll-view 滚动 ,手动设置 overflow:hidden,同 page-meta 方法一致 + ## 组件示例 点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup) \ No newline at end of file