Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
91d3fb96
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3604
Star
108
Fork
923
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
120
列表
看板
标记
里程碑
合并请求
110
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
120
Issue
120
列表
看板
标记
里程碑
合并请求
110
合并请求
110
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
91d3fb96
编写于
1月 19, 2022
作者:
M
mehaotian
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: uni-ui
上级
4ee8376d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
57 addition
and
1 deletion
+57
-1
docs/component/uniui/uni-popup.md
docs/component/uniui/uni-popup.md
+57
-1
未找到文件。
docs/component/uniui/uni-popup.md
浏览文件 @
91d3fb96
...
@@ -19,6 +19,7 @@
...
@@ -19,6 +19,7 @@
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - app-vue 中组件无法遮盖 video ,ad 等原生组件 ,建议使用 nvue
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 组件支持 nvue ,需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
### 基本用法
### 基本用法
...
@@ -104,7 +105,9 @@ export default {
...
@@ -104,7 +105,9 @@ export default {
|:-:|:-:|:-:|:-:|
|:-:|:-:|:-:|:-:|
|animation|Boolean|true|是否开启动画|
|animation|Boolean|true|是否开启动画|
|type|String|'center'|弹出方式|
|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'|主窗口背景色|
|background-color|String|'none'|主窗口背景色|
|safe-area|Boolean|true|是否适配底部安全区|
|safe-area|Boolean|true|是否适配底部安全区|
...
@@ -228,6 +231,8 @@ export default {
...
@@ -228,6 +231,8 @@ export default {
|mode|String|base| 对话框模式,可选值:base(提示对话框)/input(可输入对话框)|
|mode|String|base| 对话框模式,可选值:base(提示对话框)/input(可输入对话框)|
|title|String|-|对话框标题|
|title|String|-|对话框标题|
|content|String|-|对话框内容,base模式下生效|
|content|String|-|对话框内容,base模式下生效|
|confirmText|String|-|定义确定按钮文本|
|cancelText|String|-|定义取消按钮文本|
|value| String
\N
umber|-|输入框默认值,input模式下生效|
|value| String
\N
umber|-|输入框默认值,input模式下生效|
|placeholder|String|-|输入框提示文字,input模式下生效|
|placeholder|String|-|输入框提示文字,input模式下生效|
|before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法|
|before-close|Boolean|false | 是否拦截按钮事件,如为true,则不会关闭对话框,关闭需要手动执行 uni-popup 的 close 方法|
...
@@ -275,6 +280,57 @@ export default {
...
@@ -275,6 +280,57 @@ export default {
**Tips**
**Tips**
-
share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改
-
share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改
## 禁止滚动穿透
使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。
但由于平台自身原因,除了h5平台外 ,其他平台都不能在在组件内禁止滚动穿透,所以在微信小程序、App 平台,页面内需要用户特殊处理一下
### 微信小程序/App
在
`微信小程序/App`
平台可使用
`page-meta`
组件动态修改页面样式 ,
需要在 data 中定义一个变量,用来表示
`uni-popup`
的开启关闭状态,并通过这个变量修改
`page-meta`
的
`overflow`
属性。
在
`uni-popup`
的
`@change`
事件中可以接受到
`uni-popup`
的开启关闭状态 ,并赋值给上面的变量
**下面是关键代码片段:**
```
html
<template>
<page-meta
:page-style=
"'overflow:'+(show?'hidden':'visible')"
></page-meta>
<view
class=
"container"
>
<!-- 普通弹窗 -->
<uni-popup
ref=
"popup"
background-color=
"#fff"
@
change=
"change"
>
<!-- ... -->
</uni-popup>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
show
:
false
}
},
methods
:
{
change
(
e
)
{
this
.
show
=
e
.
show
}
}
}
</script>
```
**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
)
点击查看:
[
https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup
](
https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录