## Popup 弹出层
> 代码块: `uPopup`
> 关联组件:`uni-transition`,`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件,需要和 `uni-popup` 配套使用,暂不支持单独使用
> - `nvue` 中使用 `uni-popup` 时,尽量将组件置于其他元素后面,避免出现层级问题
> - `uni-popup` 并不能完全阻止页面滚动,可在打开 `uni-popup` 的时候手动去做一些处理,禁止页面滚动
> - 如果需要在子扩展组件内关闭 `uni-popup` ,请使用扩展(provide/inject)方式,其他方式可能会出现不可预知问题
> - 如果想在页面渲染完毕后就打开 `uni-popup` ,请在 `onReady` 或 `mounted` 生命周期内调用,确保组件渲染完毕
> - 在微信小程序开发者工具中,启用真机调试,popup 会延时出现,是因为 setTimeout 在真机调试中的延时问题导致的,预览和发布小程序不会出现此问题
> - 使用 `npm` 方式引入组件,如果确认引用正确,但是提示未注册组件或显示不正常,请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容,可能会影响组件的性能,导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
### 安装方式
本组件符合[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方法
this.$refs.popup.open()
}
}
}
```
## API
### Popup Props
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| animation | Boolean |true | 是否开启动画 |
| type | String |center | 弹出方式 |
| maskClick | Boolean |true | 蒙版点击是否关闭弹窗 |
#### Type Options
| 属性名 | 说明 |
| :-: | :-: |
| top | 顶部弹出 |
| center | 居中弹出 |
| bottom | 底部弹出 |
| message | 预置样式 :消息提示 |
| dialog | 预置样式 :对话框 |
| share | 预置样式 :底部弹出分享示例 |
### Popup Methods
|方法称名 |说明 |参数|
|:-: |:-: |:-:|
|open |打开弹出层 |- |
|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>
```
### uni-popup-message 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| type | String |success| 消息提示主题,可选值: success/warn/info/error |
| message | String |- | 消息提示文字 |
| duration | Number |3000 | 消息显示时间,超过显示时间组件自动关闭,设置为0 将不会关闭,需手动调用 close 方法关闭 |
### uni-popup-dialog 对话框
将 `uni-popup` 的`type`属性改为 `dialog`,并引入对应组件即可使用对话框 ,*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
```
```javascript
export default {
methods:{
/**
* 点击取消按钮触发
* @param {Object} done
*/
close(done){
// TODO 做一些其他的事情,before-close 为true的情况下,手动执行 done 才会关闭对话框
// ...
done()
},
/**
* 点击确认按钮触发
* @param {Object} done
* @param {Object} value
*/
confirm(done,value){
// 输入框的值
console.log(value)
// TODO 做一些其他的事情,手动执行 done 才会关闭对话框
// ...
done()
}
}
}
```
### uni-popup-dialog 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| type | String |success| 对话框标题主题,可选值: success/warn/info/error |
| mode | String |base | 对话框模式,可选值:base(提示对话框)/input(可输入对话框) |
| title | String |- | 对话框标题 |
| content | String |- | 对话框内容,base模式下生效 |
| value | String\Number |- | 输入框默认值,input模式下生效 |
| placeholder | String |- | 输入框提示文字,input模式下生效 |
| before-close | Boolean |false | 是否拦截取消按钮,如为true,则不会关闭对话框,关闭需要监听 dialog 的 close 事件,并执行 done()|
#### dialog 事件说明
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|close |点击dialog取消按钮触发 |done:执行关闭对话框 |
|confirm |点击dialog确定按钮触发 |done:执行关闭对话框:value:input模式下输入框的值 |
### uni-popup-share 分享示例
分享示例,不作为最终可使用的组件,将 `uni-popup` 的 `type` 属性改为 `share`,并引入对应组件即可使用 ,*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="share">
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
</uni-popup>
```
### uni-popup-share 属性说明
| 属性名| 类型 | 默认值 | 说明 |
| :-: | :-: | :-: | :-: |
| title | String | | 分享弹窗标题 |
### uni-popup-share 事件说明
|事件称名 |说明 |返回值 |
|:-: |:-: |:-: |
|select |选择触发 |e = {item,index}:所选参数,done:执行关闭窗口 |
**Tips**
- share 分享组件,只是作为一个扩展示例,如果需要修改数据源,请到组件内修改
## 如何扩展自己的 uni-popup 弹出层样式?
`uni-popup` 组件内容是通过 `slot` 插槽的方式去实现的,所以这极大的方便了我们的扩展。
现在我们可以在不改动 `uni-popup` 组件主体的情况下,方便的去扩展我们自己的弹出层样式。
### 添加自定义类型
如果要去扩展 `uni-popup`,我们需要把组件*引入本地*,才能去进行扩展。
组件放到本地后,在组件目录找到 `popup.js` ,在 `config` 变量中定义自己的类型,key 为当前要定义的类型,value 为弹出类型(top/bottom/center)
我们以 `uni-popup-share` 为例,看如何扩展一个`share` 底部分享的一个 `uni-popup` 子组件,代码参考 `uni-popup-share.vue`。
```javascript
// popup.js
const config = {
// ...
// 分享 key:share 为我们定义的类型 val
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计源码之老年人服药提醒app的设计与实现.zip (298个子文件)
._components 212B
._zz-prompt 212B
Uploader.class 10KB
PagePlugin.class 9KB
QX_USERController.class 8KB
QX_REMINDController.class 8KB
Page.class 8KB
QX_RECORDController.class 8KB
Tools.class 7KB
ApiUser.class 7KB
FileUtil.class 5KB
LoginHandlerInterceptor.class 5KB
AppUtil.class 5KB
ObjectExcelView.class 4KB
IPUtil.class 4KB
Watermark.class 4KB
SecCodeController.class 4KB
PageData.class 4KB
DateUtil.class 4KB
GetPinyin.class 4KB
JPushClientUtil.class 3KB
Freemarker.class 3KB
ObjectExcelRead.class 3KB
DaoSupport.class 3KB
User.class 3KB
MapDistance.class 3KB
LocationUtils.class 3KB
PathUtil.class 3KB
Menu.class 3KB
SortUtil.class 3KB
Const.class 2KB
FileZip.class 2KB
ImageAnd64Binary.class 2KB
QX_USERService.class 2KB
Logger.class 2KB
FileUpload.class 2KB
QX_REMINDService.class 2KB
QX_RECORDService.class 2KB
Role.class 2KB
BaseController.class 2KB
UuidUtil.class 2KB
DelAllFile.class 2KB
ReflectHelper.class 2KB
LatLonUtil.class 2KB
FileDownload.class 2KB
MD5.class 2KB
MyExceptionResolver.class 2KB
RightsHelper.class 2KB
startFilter.class 2KB
ShiroRealm.class 2KB
PublicUtil.class 1KB
RequestUtil.class 1KB
Constants.class 1KB
StringUtil.class 1KB
LoginFilter.class 1KB
MyX510TrustManager.class 865B
pinjie.class 737B
WebAppContextListener.class 625B
startFilter$1.class 558B
DAO.class 466B
.classpath 1KB
org.eclipse.wst.common.component 567B
org.eclipse.wst.jsdt.ui.superType.container 49B
老年人服药提醒APP-代码使用说明.doc 442KB
favicon.ico 1KB
poi-ooxml-schemas-3.11-20141221.jar 5.34MB
ojdbc6.jar 2.01MB
poi-3.11-20141221.jar 1.98MB
druid-1.0.9.jar 1.76MB
com.springsource.org.aspectj.weaver-1.6.8.RELEASE.jar 1.57MB
hutool-all-5.0.3.jar 1.43MB
ehcache-core-2.6.10.jar 1.29MB
poi-scratchpad-3.11-20141221.jar 1.23MB
poi-ooxml-3.11-20141221.jar 1.15MB
QRCode.jar 1.05MB
spring-context-4.0.4.RELEASE.jar 954KB
spring-core-4.0.4.RELEASE.jar 951KB
mysql-connector-java-5.1.34.jar 938KB
jackson-all-1.7.6.jar 932KB
freemarker-2.3.8.jar 784KB
jackson-mapper-asl-1.9.13.jar 762KB
httpclient-4.5.3.jar 730KB
mybatis-3.2.1.jar 685KB
spring-beans-4.0.4.RELEASE.jar 654KB
spring-web-4.0.4.RELEASE.jar 653KB
spring-webmvc-4.0.4.RELEASE.jar 647KB
fastjson-1.2.73.jar 639KB
zxing.jar 576KB
commons-collections-3.2.1.jar 562KB
zing3.1.jar 526KB
shiro-all-1.2.3.jar 524KB
log4j-1.2.17.jar 478KB
spring-test-4.0.4.RELEASE.jar 438KB
spring-jdbc-4.0.4.RELEASE.jar 415KB
jstl-1.2.jar 405KB
standard-1.1.2.jar 384KB
spring-orm-4.0.4.RELEASE.jar 358KB
mail.jar 348KB
spring-aop-4.0.4.RELEASE.jar 344KB
apache-mime4j-0.6.1.jar 337KB
共 298 条
- 1
- 2
- 3
资源评论
码农落落
- 粉丝: 525
- 资源: 2304
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- tensorflow-gpu-2.5.0-cp39-cp39-manylinux2010-x86-64.whl
- tensorflow-gpu-2.5.2-cp39-cp39-manylinux2010-x86-64.whl
- 内含方正小标宋简体、仿宋-Gb2312、黑体、楷体、宋体,五个公文常用字体
- 记忆卡牌游戏源码及可运行文件
- 利用wps的js宏编写的一键格式修改辅助工具
- 基于matlab实现训练RBF网络的,但用的算法是梯度下降法,算法仍然是自己写的.rar
- 基于matlab实现小波分析改造后,可以分析脑电数据的程序,出现32个导联每个通道的功率谱.rar
- 基于matlab实现物体的应力和应变DIC-通过识别一系列图像的变形得到物体的应力和应变
- 基于matlab实现文档+程序NSGA-II多目标优化的matlab代码.rar
- 基于matlab实现文档+程序 多目标优化,NSGA2算法实现.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功