• 更新记录
  • 1.1.3（2019-08-02）
  • 1.1.2（2019-07-24）
  • Popup 弹出层
    • 更新日志

    更新记录

    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

    • 初始化项目