## Popup 弹出层
> **组件名:uni-popup**
> 代码块: `uPopup`
> 关联组件:`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件,需要和 `uni-popup` 配套使用,暂不支持单独使用
> - `nvue` 中使用 `uni-popup` 时,尽量将组件置于其他元素后面,避免出现层级问题
> - `uni-popup` 并不能完全阻止页面滚动,可在打开 `uni-popup` 的时候手动去做一些处理,禁止页面滚动
> - 如果想在页面渲染完毕后就打开 `uni-popup` ,请在 `onReady` 或 `mounted` 生命周期内调用,确保组件渲染完毕
> - 在微信小程序开发者工具中,启用真机调试,popup 会延时出现,是因为 setTimeout 在真机调试中的延时问题导致的,预览和发布小程序不会出现此问题
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
```
```javascript
export default {
methods:{
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
}
}
}
```
### 设置主窗口背景色
在大多数场景下,并不需要设置 `background-color` 属性,因为`uni-popup`的主窗口默认是透明的,在向里面插入内容的时候 ,样式完全交由用户定制,如果设置了背景色 ,例如 `uni-popup-dialog` 中的圆角就很难去实现,不设置背景色,更适合用户去自由发挥。
而也有特例,需要我们主动去设置背景色,例如 `type = 'bottom'` 的时候 ,在异型屏中遇到了底部安全区问题(如 iphone 11),因为 `uni-popup`的主要内容避开了安全区(设置`safe-area:true`),导致底部的颜色我们无法自定义,这时候使用 `background-color` 就可以解决这个问题。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
```
### 禁用打开动画
在某些场景 ,可能不希望弹层有动画效果 ,只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
```
### 禁用点击遮罩关闭
默认情况下,点击遮罩会自动关闭`uni-popup`,如不想点击关闭,只需将`mask-click`设置为`false`,这时候要关闭`uni-popup`,只能手动调用 `close` 方法。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">关闭</button>
</uni-popup>
```
```javascript
export default {
data() {
return {}
},
onReady() {},
methods: {
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
```
## API
### Popup Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|animation|Boolean|true|是否开启动画|
|type|String|'center'|弹出方式|
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|background-color|String|'none'|主窗口背景色|
|safe-area|Boolean|true|是否适配底部安全区|
#### Type Options
|属性名|说明|
|:-:| :-:|
|top|顶部弹出 |
|center|居中弹出|
|bottom|底部弹出|
|left|左侧弹出|
|right|右侧弹出|
|message|预置样式 :消息提示|
|dialog|预置样式 :对话框|
|share|预置样式 :底部弹出分享示例 |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|open|打开弹出层|open(String:type) ,如果参数可代替 type 属性|
|close|关闭弹出层 |-|
### Popup Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|change|组件状态发生变化触发|e={show: true|false,type:当前模式}|
## 扩展组件说明
`uni-popup` 其实并没有任何样式,只提供基础的动画效果,给用户一个弹出层解决方案,仅仅是这样并不能满足开发需求,所以我们提供了三种基础扩展样式
### uni-popup-message 提示信息
将 `uni-popup` 的`type`属性改为 `message`,并引入对应组件即可使用消息提示 ,*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="message">
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
</uni-popup>
```
### PopupMessage Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|消息提示主题|
|message|String|-|消息提示文字|
|duration|Number|3000|消息显示时间,超过显示时间组件自动关闭,设置为0 将不会关闭,需手动调用 close 方法关闭|
#### Type Options
|属性名|说明|
|:-:| :-:|
|success|成功 |
|warn|警告|
|error|失败|
|info|消息|
### PopupMessage Slots
|名称|说明|
|:-:|:-:|
|default|消息内容,会覆盖 message 属性|
### uni-popup-dialog 对话框
将 `uni-popup` 的`type`属性改为 `dialog`,并引入对应组件即可使用对话框 ,*该组件不支持单独使用*
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
```
```javascript
export default {
methods: {
open() {
this.$refs.popup.open()
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情,before-close 为true的情况下,手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
},
/**
* 点击确认按钮触发
* @param {Object} done
* @param {Object} value
*/
confirm(value) {
// 输入框的值
console.log(value)
// TODO 做一些其他的事情,手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
```
### PopupDialog Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|对话框标题主题,可选值: success/warn/info/error|
|mode|String|base| 对话框模式,可选值:base(提示对话框)/input(可输入对话框)|
|title|String|-|对话框标题|
|content|String|-|对话框内容,base模式下生效|
|value| String\Number|-|输入框默认值,input模式
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
基于Java+Springboot+Vue的WMS仓库管理系统+微信小程序(源码+数据库+部署视频).zip (1924个子文件)
ry.bat 2KB
run.bat 242B
package.bat 163B
package.bat 152B
build.bat 120B
run-web.bat 118B
clean.bat 113B
ExcelUtil.class 39KB
GenTableServiceImpl.class 15KB
StockMatLabel.class 15KB
PDFService.class 15KB
MatLabelRequestData.class 14KB
Convert.class 13KB
SysMenuServiceImpl.class 13KB
StockRecord.class 13KB
HTMLFilter.class 13KB
StockInDetail.class 13KB
SysUserServiceImpl.class 12KB
StockAllotDetail.class 12KB
PDFUtils.class 12KB
StockInfo.class 12KB
StockOutReturnDetail.class 12KB
AllotDetailPdfData.class 11KB
StockInReturnDetail.class 11KB
StockOutDetail.class 11KB
MatLabelPdfData.class 11KB
ReflectUtils.class 11KB
VelocityUtils.class 11KB
StockOutOrder.class 10KB
SysDeptServiceImpl.class 10KB
StockInOrderServiceImpl.class 9KB
OutReturnDetailPdfData.class 9KB
InReturnDetailPdfData.class 9KB
SysRoleServiceImpl.class 9KB
StockOutReturn.class 9KB
SecurityConfig.class 9KB
HttpClientUtils.class 9KB
HttpUtils.class 9KB
StockOutOrderServiceImpl.class 9KB
StockAllotOrderServiceImpl.class 8KB
StockInReturnServiceImpl.class 8KB
StockRecordStats.class 8KB
StringUtils.class 8KB
Server.class 8KB
StockAllotOrder.class 8KB
RedisCache.class 8KB
BaseMat.class 8KB
SysUser.class 8KB
GenController.class 8KB
LogAspect.class 8KB
OutReturnPdfData.class 8KB
GenTable.class 8KB
StockOutReturnServiceImpl.class 7KB
BaseSupplier.class 7KB
AllotOrderPdfData.class 7KB
GenTableColumn.class 7KB
StockInReturn.class 7KB
TokenService.class 7KB
SysDictTypeServiceImpl.class 7KB
SysJobController.class 7KB
StockInOrder.class 7KB
OutOrderPdfData.class 7KB
StockInfoServiceImpl.class 6KB
StockProdOrder.class 6KB
UUID.class 6KB
FileUtils.class 6KB
MyBatisConfig.class 6KB
ScheduleUtils.class 6KB
BaseMatBom.class 6KB
SysMenu.class 6KB
FileUploadUtils.class 6KB
PermitAllUrlProperties.class 6KB
SysConfigServiceImpl.class 6KB
SysLoginService.class 6KB
GenUtils.class 6KB
SysJobServiceImpl.class 6KB
BaseMatServiceImpl.class 5KB
DateUtils.class 5KB
SysRole.class 5KB
JobInvokeUtil.class 5KB
BaseMatBomServiceImpl.class 5KB
GlobalExceptionHandler.class 5KB
StockRecordTypeEnum.class 5KB
StockInStats.class 5KB
SysOperLog.class 5KB
RateLimiterAspect.class 5KB
InDetailPdfData.class 5KB
QRUtils.class 5KB
SysDept.class 5KB
StockInfoSummary.class 5KB
SysJob.class 5KB
SysDictData.class 5KB
DruidConfig.class 5KB
LoginUser.class 5KB
MatBomTree.class 5KB
StockOutStats.class 5KB
DictUtils.class 4KB
SameUrlDataInterceptor.class 4KB
BaseLocation.class 4KB
Base64.class 4KB
共 1924 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
FL1768317420
- 粉丝: 4926
- 资源: 5741
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- stm32-CAN波特率计算工具及代码生成
- 算法题-排序、搜索、图、动态规划、贪心、匹配、AI...各类算法讲解
- sdfsdsdfsdfsd
- 2023-04-06-项目笔记 - 第一百六十八阶段 - 4.4.2.166全局变量的作用域-166 -2024.06.18
- 电赛备赛资料-电赛历年试题&经验分享&代码程序资源
- 高分项目,PID-小车类-智能小车PID算法,智能车PID算法资料打包+PID演示软件+PID算法汇总
- django数据库查询封装
- 高分项目,PID-小车类-PID算法控制小车直线行驶(制作步骤+程序+PID库)
- Solution1.rarSolution1.rarSolution1.rar
- 高分项目,PID-增量式PID和位置式PID算法实现和PID库(51单片机+STM32+arduino完成)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功