更新记录

1.0.0（2022-09-30）

实例化组件

平台兼容性

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

Page Code

<wly-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <wly-button @click="dialogVisible = false">取 消</wly-button>
            <wly-button type="primary" @click="dialogVisible = false">
                确 定
            </wly-button>
        </span>
    </wly-dialog>

Attributes

参数 说明 类型 可选值 默认值
visible 是否显示 Dialog，支持 .sync 修饰符 boolean —— false
title Dialog 的标题，也可通过具名 slot （见下表）传入 string —— ——
width Dialog 的宽度 string —— 50%
fullscreen 是否为全屏 Dialog boolean —— false
top Dialog CSS 中的 margin-top 值 string —— 15vh
modal 是否需要遮罩层 boolean —— true
modal-append-to-body 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上 boolean —— true
append-to-body Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true boolean — false
lock-scroll 是否在 Dialog 出现时将 body 滚动锁定 boolean — true
custom-class Dialog 的自定义类名 string — —
close-on-click-modal 是否可以通过点击 modal 关闭 Dialog boolean — true
close-on-press-escape 是否可以通过按下 ESC 关闭 Dialog boolean — true
show-close 是否显示关闭按钮 boolean — true
before-close 关闭前的回调，会暂停 Dialog 的关闭 function(done)，done 用于关闭 Dialog — —
center 是否对头部和底部采用居中布局 boolean — false
destroy-on-close 关闭时销毁 Dialog 中的元素 boolean — false

Slot


name 说明
— Dialog 的内容
title Dialog 标题区的内容
footer Dialog 按钮操作区的内容

Events


事件名称 说明 回调参数
open Dialog 打开的回调 —
opened Dialog 打开动画结束时的回调 —
close Dialog 关闭的回调 —
closed Dialog 关闭动画结束时的回调 —

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

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

加载更多...