更新记录

1.1.3（2019-08-02）

  • 新增 打开关闭弹窗的回调事件

1.1.2（2019-07-24）

  • 新增 显示弹窗属性
  • 修复 h5 取消导航栏，顶部空白问题查看更多

Popup 弹出层

弹出层组件，为了解决遮罩弹层的问题。组件名：uni-popup，代码块： uPopup。

使用方式：

在 script 中引用组件 

  1. import uniPopup from "@/components/uni-popup/uni-popup.vue"
  2. export default {
  3.     components: {uniPopup}
  4. }

基本用法

  1. <uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>

属性说明：

属性名类型默认值说明
animationBooleantrue是否开启动画
typeStringcenter弹出方式，可选值：top（顶部），center（居中），bottom（底部）
showBooleanfalse显示弹窗
customBooleanfalse是否自定义内容
maskClickBooleantrue蒙版点击是否关闭弹窗
changeFunctiontrue打开关闭弹窗触发

方法说明：通过 ref 获取组件方法

方法称名说明
open打开弹出层
close关闭弹出层
  1. <view>
  2.     <button @click="openPopup">打开弹出层</button>
  3.     <uni-popup ref="popup" type="center">
  4.         弹出层示例
  5.         <button @click="closePopup">关闭弹出层</button>
  6.     </uni-popup>
  7. </view>
  1. export default {
  2.     methods:{
  3.         openPopup(){
  4.             this.$refs.popup.open()
  5.         },
  6.         closePopup(){
  7.             this.$refs.popup.close()
  8.         }
  9.     }
  10. }

Tips

  • show 的作用与 open() 效果一致 ，在使用中显示弹窗二者只能选择其一。如果使用 show 显示弹窗，那么关闭弹窗时，应将 show 置为 false

更新日志

1.1.3

  • 新增 打开关闭弹窗的回调事件 1.1.2

  • 新增 显示弹窗属性

  • 修复 h5 取消导航栏，顶部空白问题 1.1.1

  • 修复 图片不显示的问题 1.1.0

  • 新增 动画效果

  • 修复 示例底部弹出样式错乱的 bug

  • 优化 代码重构 可完全自定义内容 1.0.0

  • 初始化项目