Appearance

pop

pop组件 是页面中的模态框,由于 Uni 无法直接通过 js 直接初始化 模态框,这里我们通过在 reft-layout组件中插入全局pop组件,通过全局发布订阅模式将 pop组件的显示隐藏订阅到全局,实现 js 调用模态框,所以普通情况下,我们不需要单独调用 pop组件,在页面的生命周期中直接 使用 this.$pop来调用即可 。

由于采用了特殊的处理,接口方法不提供 promise 接口返回书写方式。

使用

pop组件,不提供可配置参数,配置参数 通过方法传递 进去,详情请看接口说明

代码示例

模板代码

<pop ref="pop"></pop>

js代码

...
 methods:{
     alert(){
         this.$refs.pop.alert('你需要提示的内容!',()=>{
        	//点击确定后执行的事件
        });
     },
     confirm(){
        this.$refs.pop.confirm('你确定提交此修改吗?',()=>{
            //点击确定后执行的事件
        },()=>{
            //点击取消执行的事件
        });
      },
     commonConfirm(){
         //我们通常不在当前引入组件,而是直接调用全局 pop方法(this.$pop.confirm,this.$pop.alert)
        this.$pop.confirm('你需要提示的内容!',()=>{
            //点击确定后执行的事件
        });
      }showPop(){
          //如果你在 组件 options属性上配置了显示属性,也可以可以通过 show/hide方法来控制弹窗的显示
          this.$refs.pop.show({
              title:'好吧',
              content : '<b style="color:red;">这就是要显示</b>的内容!'
              //这里支持html富文本标签,请不要使用 <view>标签
          });
      },
       hidePop(){
           this.$refs.pop.hide();
       },
       ...
 }
...

Method

参数参数说明
alertFunction(content,confirmFn)提示框,content 同show 中参数
confirmFunction(content,confirmFn,cancelFn)确认框,content 同show 中参数
showFunction(options)显示弹窗,参数为显示弹窗参数,覆盖已配置在options上的参数
hideFunction()关闭弹窗

show 方法 options 可配置参数

参数说明类型默认值可选值
mode弹窗模式String'alert''alert'|'confirm'
z-index层级String | Number1075-
title标题内容String''-
show-title是否显示标题Booleanfalsetrue|false
width模态框宽度,数值时单位为rpxString | Number'600rpx'-
content内容,支持即html标签,请不要使用 <view> 标签String''-
content-class给显示内容自定义classNameString''-
content-style给显示内容自定义样式Object{}-
confirm-show显示确定按钮Booleantruetrue|false
confirm-text确认按钮的文字String确认-
confirm-color确认按钮的颜色String#2979ff-
confirm-style自定义确认按钮样式,对象形式Object--
cancel-show是否显示取消按钮Booleanfalsetrue
cancel-text取消按钮的文字String取消-
cancel-color取消按钮的颜色String#606266-
cancel-style自定义取消按钮样式,对象形式Object--
zoom是否开启缩放模式Booleantruefalse
async-close是否异步关闭,只对确定按钮有效,见上方说明Booleanfalsetrue
mask-close是否允许点击遮罩关闭ModalBooleanfalsetrue
offset往上偏移的值String |Number0-
confirm提交事件Function()=>{}-
cancel取消时间Function()=>{}-