更新记录

1.0.2(2024-03-22)

补充一些说明

1.0.1(2024-03-22)

修改一些说明

1.0.0(2024-03-22)

首次上传。

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

outsider-dialog

功能说明:对话框,自动计算位置、宽、高,也支持自定义。详见属性说明。

注意:对不支持uni.createSelectorQuery().in()功能的支付宝小程序,不要同时打开多个对话框。
显示图标需<uni-icons>支持。

属性(props):

属性名称 类型 缺省值 说明
teleport HTMLElement或RefImpl 页面根组件 上级容器,确定背景掩盖范围及对话框最大高宽(position不能是static)
icon string null 标题栏图标
title string 标题文字
close-box boolean true 是否显示右上角关闭窗口的box
head-style string 自定义对话框头部格式
content string 不定义缺省slot时,显示于窗体的文字
height string <自动计算> 对话框高度
width string <自动计算> 对话框宽度
show-header boolean true 是否显示对话框标题栏
align string 'center' 水平位置,可取值:left,center,right及自定义左距,比如“5em”
valign string 'center' 垂直位置,可取值:top,center,bottom及自定义顶距,比如“5em”
confirm object null 当不为空时,显示确定按钮。格式见下文。
cancel object null 当不为空时,显示取消按钮。格式见下文。
mask-color string 'rgba(0,0,0,0.2)' 掩盖背景的颜色,请使用rgba格式
  1. confirm说明: 定义一个确定按钮,点击后调用onconfirm事件。
    • 对象格式:
      {
      text:string;//按钮文字,缺省为“确定”
      close:boolean;//执行完onconfirm事件后,是否自动关闭对话框。缺省为false
      ... //<button>的其他属性
      }
  2. cancel说明: 定义一个取消按钮,点击后调用oncancel事件。
    • 对象格式:
      {
      text:string;//按钮文字,缺省为“取消”
      close:boolean;//执行完oncancel事件后,是否自动关闭对话框。缺省为true(与confirm不同)
      ... //<button>的其他属性
      }

      事件(emits):

  3. onconfirm():点击confirm按钮时触发。见属性confirm说明。
  4. oncancel():点击cancel按钮时触发。见属性cancel说明。

    方法:

  5. open():打开对话框
  6. close():关闭对话框

    插槽(slots):

  7. header:对话框标题栏。用于替代icon及title属性。
  8. default:对话框主体内容。
  9. footer:对话框按钮栏。用于替代confirm及cancel按钮。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问