86 lines
1.9 KiB
Markdown
86 lines
1.9 KiB
Markdown
|
## Popup 弹出层
|
|||
|
|
|
|||
|
|
弹出层组件，为了解决遮罩弹层的问题。组件名：``uni-popup``，代码块： uPopup。
|
|||
|
|
|
|||
|
|
|
|||
|
|
**使用方式：**
|
|||
|
|
|
|||
|
|
在 ``script`` 中引用组件
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import uniPopup from "@/components/uni-popup/uni-popup.vue"
|
|||
|
|
export default {
|
|||
|
|
components: {uniPopup}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**基本用法**
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**属性说明：**
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值| 说明 |
|
|||
|
|
| --- | --- | --- | --- |
|
|||
|
|
| animation | Boolean |true | 是否开启动画 |
|
|||
|
|
| type | String |center | 弹出方式，可选值：top（顶部），center（居中），bottom（底部） |
|
|||
|
|
| show | Boolean |false | 显示弹窗 |
|
|||
|
|
| custom | Boolean |false | 是否自定义内容 |
|
|||
|
|
| maskClick | Boolean |true | 蒙版点击是否关闭弹窗 |
|
|||
|
|
| change | function |true | 打开关闭弹窗触发 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
**方法说明：**
|
|||
|
|
通过 `ref` 获取组件方法
|
|||
|
|
|
|||
|
|
|方法称名 |说明 |
|
|||
|
|
|--- |---- |
|
|||
|
|
|open |打开弹出层 |
|
|||
|
|
|close |关闭弹出层 |
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<view>
|
|||
|
|
<button @click="openPopup">打开弹出层</button>
|
|||
|
|
<uni-popup ref="popup" type="center">
|
|||
|
|
弹出层示例
|
|||
|
|
<button @click="closePopup">关闭弹出层</button>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export default {
|
|||
|
|
methods:{
|
|||
|
|
openPopup(){
|
|||
|
|
this.$refs.popup.open()
|
|||
|
|
},
|
|||
|
|
closePopup(){
|
|||
|
|
this.$refs.popup.close()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Tips
|
|||
|
|
- show 的作用与 open() 效果一致 ，在使用中显示弹窗二者只能选择其一。如果使用 show 显示弹窗，那么关闭弹窗时，应将 show 置为 false
|
|||
|
|
|
|||
|
|
### 更新日志
|
|||
|
|
**1.1.3**
|
|||
|
|
- 新增 打开关闭弹窗的回调事件
|
|||
|
|
|
|||
|
|
**1.1.2**
|
|||
|
|
- 新增 显示弹窗属性
|
|||
|
|
- 修复 h5 取消导航栏，顶部空白问题
|
|||
|
|
|
|||
|
|
**1.1.1**
|
|||
|
|
- 修复 图片不显示的问题
|
|||
|
|
|
|||
|
|
**1.1.0**
|
|||
|
|
- 新增 动画效果
|
|||
|
|
- 修复 示例底部弹出样式错乱的 bug
|
|||
|
|
- 优化 代码重构 可完全自定义内容
|
|||
|
|
|
|||
|
|
**1.0.0**
|
|||
|
|
- 初始化项目
|