# layer-vue

**Repository Path**: MonLam/layer-vue

## Basic Information

- **Project Name**: layer-vue
- **Description**: 该库由Layui-vue库中提取出来，方便web独立使用。layui-vue官网：http://www.layui-vue.com/zh-CN/index
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-06-29
- **Last Updated**: 2024-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Layer-Vue

该库由Layui-vue库中提取出来，方便独立使用，Layui-Vue官网地址：
[http://www.layui-vue.com/zh-CN/index](http://www.layui-vue.com/zh-CN/index)

### 基本API

| 函数签名 | 描述 |
| ------- | --- |
| `create: (option: LayerProps, defaultOption: LayerProps, callback?: Function)` | 创建一个弹层 |
| `open: (option: LayerProps, callback?: Function)` | 打开一个弹层 |
| `close: (id: string)` | 关闭指定 ID 的弹层 |
| `closeAll: ()` | 关闭当前上下文中全部的弹层 |
| `reset: (id: string)` | 重置某个弹层的位置和大小 |
| `full: (id: string)` | 最大化某个弹层 |
| `min: (id: string)` | 最小化某个弹层 |
| `revert: (id: string)` | 最大/最小化时复原弹层 |


### 弹层 API

| 函数签名 | 描述 |
| ------- | --- |
| `msg: (message: string, option: LayerProps = {}, callback?: Function)` | 消息 |
| `drawer: (option: LayerProps, callback?: Function)` | 抽屉 |
| `load: (load: number, option: LayerProps = {}, callback?: Function)` | 加载 |
| `confirm: (msg: string, option: LayerProps = {}, callback?: Function)` | 确认 |
| `photos: (option: string \| LayerProps, callback?: Function)` | 图片预览 |
| `notify: (option: LayerProps, callback?: Function)` | 通知 |
| `prompt: (option: LayerProps, callback?: Function)` | 输入框 |


### Properity 属性

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`v-model`* | 显示 | boolean | `false`  |  |
| *`id`* | layer标识 可不传(内部生成) | `string` | | |
| *`type`* | 类型 | string | `1` | `0(dialog)` `1(page)` `2(iframe)` `3(loading)` `4(drawer)` `5(photos)` `6(notify)` |
| *`title`* | 标题 | `string` `boolean` `Function` | `标题` | -- |
| *`title-style`* | 标题样式 | `string` `StyleValue` | -- | -- |
| *`content`* | 内容 | `PropsContentType` | -- | -- |
| *`isHtmlFragment`* | `content` 是否解析html | `boolean` | `false` | -- |
| *`offset`* | 偏移量 | `string` `string[]` | `auto` | -- |
| *`area`* | 弹窗宽高 (`auto` 将自适应) | `string` `string[]` | `auto`  | -- |
| *`move`* | 开启拖拽 | boolean | `true` | -- | 
| *`maxmin`* | 开启最小/最大化 | boolean | `false` | -- |
| *`resize`* | 开启左下角拖拽放大缩小 | boolean | `false` | -- |
| *`shade`* | 显示遮盖层 | boolean | `true` | -- |
| *`shade-close`* | 遮盖层关闭 | boolean | `true` | -- |
| *`shade-style`*   | 遮盖层样式   | `StyleValue` | -- | -- |
| *`shade-opacity`* | 遮盖层透明度 | `string` | `0.1` | `0.1` - `1` |
| *`layer-classes`* | layer box 类名 (原skin属性) | `string` | -- | -- |
| *`z-index`* | layer `z-index` 不设置内部将从 `99999` 开始递增 | `number` | -- | -- |
| *`closeBtn`* | 关闭按钮 | `boolean` `string` | `1` | `false` `1` `2` |
| *`btn`* | 底部按钮集合 | `BtnType[]` | -- | -- |
| *`btnAlign`* | 底部按钮位置 | `string` | `r` | `l` `c` `r` |
| *`anim`* | layer打开动画 | `number` | `0` | `0` - `6` |
| *`isOutAnim`* | 是否需要离场动画 | `boolean` | `true` | -- |
| *`icon`* | `msg` `notify` 展示Icon | `string` `number` | -  | `1` `2` `3` `4` `5` `6` `7` `16`  |
| *`imgList`* | `type` 为5 渲染图片列表 | `ImgListType[]` | -- | -- |
| *`startIndex`* | 图片初始浏览索引 | `number` | 0 | -- |
| *`animDuration`* | layer打开关闭动画速率 | `string` | `0.3s`  | -- |
| *`moveOut`* | 是否可以拖出浏览器可视区域 | `boolean` | `false`  | -- |
| *`teleport`* | layer挂载到目标DOM | `string` | `body`  | -- |
| *`teleportDisabled`* | 禁止挂载到目标DOM，保持原位置 | `boolean` | `false`  | -- |
| *`lastPosition`* | 最小/最大化复原位置 `true`上次位置(拖动)、 `false` layer初始位置 | `boolean` | `true`  | -- |
| *`time`* | `msg` `notify` 定时关闭   | `number` |  `msg`1000 `notify`2000 | -- |
| *`load`* | `type` 为3时，loading Icon   | `number` |  0 | `0`, `1` |
| *`yesText`* | 底部默认按钮文本   | `string` | `确定` | -- |

以下是 `BtnType`，为 `LayerProps` 的 `btn` 属性所用。

| 参数 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`text`* | 按钮文本 | `string` | | |
| *`callback`* | 回调 | `Function` | | |
| *`style`* | 按钮样式 | `string` `StyleValue` | `""` | |
| *`class`* | 按钮类 | `string` | `""` | |
| *`disabled`* | 是否禁用 | `boolean` | `false` | |


### Callbacks 回调

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`full`* | 最大化回调 | `function` | `(id) => {}` | |
| *`min`* | 最小化回调 | `function` | `(id) => {}` | |
| *`revert`* | 恢复最小/最大化回调 | `function` | `(id) => {}` | |
| *`success`* | layer打开回调 | `function` | `(id) => {}` | |
| *`end`* | layer关闭回调 | `function` | `(id) => {}` | |
| *`close`* | 内部(右上角/点击遮罩/默认确认按钮)关闭回调 | `function` | `(id) => {}` | |
| *`beforeClose`* | 内部(右上角/点击遮罩/默认确认按钮)关闭前回调，返回值为 `true` 内部才会关闭 | `function` | `(id) => boolean` | |
| *`destroy`* | 销毁回调 | `function` | `() => {}` | |
| *`yes`* | 点击底部默认按钮 | `function` | `id` | | |
| *`moveStart`* | 弹窗拖动位置开始回调 | `function` | `id`| - |
| *`moving`* | 弹窗拖动位置回调 | `function` | `id`| - |
| *`moveEnd`* | 弹窗拖动位置结束回调 | `function` | `id`| - |
| *`resizeStart`* | 弹窗拉伸位置开始回调 | `function` | `id`| - |
| *`resizing`* | 弹窗拉伸位置开始回调 | `function` | `id`| - |
| *`resizeEnd`* | 弹窗拉伸位置开始回调 | `function` | `id`| - |


### Slot 插槽

| 名称 | 描述 |
| -- | -- |
| *`default`* | 主体内容 |
| *`title`* | 标题 |
| *`footer`* | 底部 |


### Exposes 事件

| 名称 | 描述 |
| -- | -- |
| *`reset`* | 重置弹窗 `modelValue` 为false 弹窗将打开 |
| *`open`* | 打开弹窗 |
| *`close`* | 关闭弹窗 |
| *`full`* | 最大化 |
| *`min`* | 最小化 |
| *`reset`* | 复原最小/最大化 |


### layer.msg

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`message`* | 要显示的消息 | `string` | `""` |
| *`option`* | 配置 | `LayerProps` | `{}` |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 参数名 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `0` |
| *`title`* | 标题 | `false` |
| *`content`* | 内容 | *`message`* |
| *`shade-close`* | 遮盖层关闭 | `false` |
| *`closeBtn`* | 关闭按钮 | `false` |
| *`isMessage`* | 是否为消息类型 | `true` |
| *`shade`* | 遮盖层 | `false` |
| *`time`* | 关闭时间 | `1000` |

可选属性如下：

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`isMessage`* | 是否为消息类型 | `boolean` | `true` | `true` `false` |


### layer.drawer

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`option`* | 配置 | `LayerProps` |  |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `"drawer"` |


### layer.load

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`load`* | 加载层样式 | `number` | |
| *`option`* | 配置 | `LayerProps` | |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `3` |
| *`load`* | 加载层样式 | *`load`* |
| *`anim`* | 入场动画 | `5` |
| *`isOutAnim`* | 出场动画 | `false` |
| *`shade-close`* | 遮盖层关闭 | `false` |

可选属性如下：

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`load`* | 加载层样式 | `number` | `0` | `0` - `6` |


### layer.confirm

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`msg`* | 要显示的消息 | `string` | `""` |
| *`option`* | 配置 | `LayerProps` | `{}` |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `0` |
| *`content`* | 内容 | *`msg`* |
| *`shade-close`* | 遮罩层关闭 | `false` |


### layer.photos

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`option`* | 配置 | `string` `ImgListType` | |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `5` |
| *`anim`* | 入场动画 | `2` |
| *`startIndex`* | 初始图片索引 | `0` |
| *`isOutAnim`* | 出场动画 | `true` |
| *`shade-close`* | 遮罩层关闭 | `true` |
| *`shade-opacity`* | 遮罩层透明度 | `"0.2"`|

可选属性如下：

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`startIndex`* | 初始图片索引 | `number` | `0` |  |
| *`imgList`* | 图片列表 | `Array<ImgListType>` | `[]` |  |

`ImgListType` 如下：

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`src`* | 图片地址 | `string` | | |
| *`alt`* | 图片描述 | `string` | `""` | |
| *`thumb`* | 缩略图 | `string` | `""` | |


### layer.notify

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`option`* | 配置 | `LayerProps` | |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`offset`* | 位置 | `"rt"` |
| *`time`* | 关闭时间 | `2000` |
| *`area`* | 尺寸 | `"auto"` |
| *`shade`* | 遮罩层 | `false` |


### layer.prompt

| 参数名 | 描述 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| *`option`* | 配置 | `LayerProps` | |
| *`callback`* | 弹层创建后的回调 | `Function` | `(id) => {}` |

`defaultOption` 如下：

| 属性 | 描述 | 值 |
| --- | --- | -- |
| *`type`* | 类型 | `"prompt"` |
| *`shade-close`* | 遮罩层关闭 | `false` |
| *`shade-opacity`* | 遮罩层透明度 | `"0.2"` |

可选属性如下：

| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| -- | -- | -- | -- | -- |
| *`formType`* | 表单类型 | `string` `number` | `"text"` | `0` `1` `2` `"text"` `"password"` `"textarea"` |
| *`value`* | 表单初始值 | `string` | `""` | |
| *`maxLength`* | 最大输入长度 | `number` | | |
| *`placeholder`* | 占位符 | `string` | `"请输入内容"` | |