layui/package/document-layer/src/document/zh-CN/demo.md

消息

::: demo 通过 layer.msg(content, options) 创建消息窗, 第一个参数msg为消息内容, 第二参数options为可选配置, 常用于配置time超时时间等。

普通消息 成功消息 失败消息 警告消息 锁定消息

:::

确认

::: demo 通过 layer.confirm(msg, options) 创建确认框, 第一个参数msg为文本消息, 第二个参数options为选项配置, 你可以使用options的btn属性定义操作。

确认框 询问框

:::

加载

::: demo 通过 layer.load(type, options) 创建加载层, 第一个参数type为加载动画样式, 第二个参数options为可选配置, 常用于设置time加载时长shade遮盖层等。

加载1 加载2 加载3 加载4

:::

模态

::: demo 通过 layer.open(option) 创建模态窗, 目前支持iframe page等类型, 你可以使用options选项开启Resize Offset等更多特性。

小试牛刀 指定尺寸 指定位置 远程窗体 代码片段 虚拟节点 缩小放大 尺寸拉伸 设置层级 内容适应 内容适应2

:::

抽屉

::: demo 通过 layer.drawer(options) 创建抽屉层, options选项配置, 抽屉本质上是一个特殊的模态窗, 你可以使用offset选项来设置方向。 <button @click="openTop">上 <button @click="openBottom">下 <button @click="openLeft">左 <button @click="openRight">右

:::

图片

::: demo 通过 layer.photos(options) 创建图片预览弹层, 参数options主要传入预览的图片链接。

图片查看 图片标题 图片分组

:::

销毁

::: demo 我们提供 layer.close(id) 与 layer.closeAll() 函数实现弹出层的主动销毁。

打开 销毁 销毁全部

:::

通讯

::: demo 👉 查看 Children1.vue, 通过 h() 函数的第二个参数向 Children1.vue 传递响应式变量。

数据

:::

::: demo 👉 查看 Children2.vue, 通过 h() 函数的第二个参数声明 onXxx() 形式的函数完成 Children2.vue 的事件监听。

事件

:::