# layer-vue

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

## Basic Information

- **Project Name**: layer-vue
- **Description**: layer vue is a web elastic layer component
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2022-01-04
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 简介

layer - vue 是一款基于 vue 3.0 的 Web 弹层组件, 它具备全方位的解决方案，实现了 layer.js 近乎所有的 Api。

![输入图片说明](image.png)

在 layui - vue 的以往版本中，layer 作为内置组件存在，导致其他项目中引用，将造成大量的资源占用，为此我们将 layer - vue  项目独立，你可以在任何 vue3.0 的项目中，引用并使用它

### 安装

layer - vue 作为独立项目的存在，首先我们需要使用 npm 或 yarn 进行安装

1.npm
```
npm install @layui/layer-vue
```

2.yarn
```
yarn add @layui/layer-vue
```

3.css
```
import "@layui/layer-vue/lib/index.css"
```

### 使用

layer-vue 提供了 组件 与 函数 两种调用方式

组件方式：
```
<template>
  <lay-layer v-model="visible">
    内容
  </lay-layer>
</template>
<script>
import { LayLayer } from "@layui/layer-vue";
export default {
  components: {
    LayLayer
  },
  setup(){
    const visible = ref(false)
    return {
      visible
    }
  }
}
</script>
```

你可以使用 v-model 配置，控制 lay-layer 的展示与隐藏

在 layer 中，通过 type = 2 的设置来展示远程网络页面，即 iframe , 在 layer - vue 中同样也支持该特性
```
<template>
  <lay-layer
    maxmin
    type="2"
    v-model="visible"
    content="http://www.pearadmin.com"
  ></lay-layer>
</template>
```

弹层通常作为 js 的回调反馈出现，所以函数的调用方式，更贴合我们的使用

核心函数：
```
// 消息
layer.msg(msg，option, callback)

// 提示
layer.confirm(msg, option, callback)

// 加载
layer.load(type, option, callback)

// 模态窗
layer.open(option, callback)

// 关闭
layer.close(id);

// 关闭所有
layer.closeAll();
```
参数解析：

msg: 提示信息
option: 底部配置
callback: 回调函数
id: layer.msg 返回值

使用案例：
```
<template>
  <button type="button" @click="openModal">提示消息</button>
</template>

<script setup>
import { ref } from "vue";
import { layer } from "@layui/layer-vue";

let id;

const openModal = function () {
  id = layer.open({ title:'标题', content: "内容", shade: false });
};
</script>

```
以上案例，通过 layer.open 来打开一个模态窗 lay-modal, 函数返回值为当前弹层的 id, 你可以使用 layer.close(id) 来销毁当前弹窗，亦或 layer.closeAll()

## [阅读文档](http://layui-vue.pearadmin.com/zh-CN/components/modal)

### 属性

| 备注            | 描述          | 默认值                     |
| --------------- | ------------- | -------------------------- |
| title           | 标题          | --                         |
| move            | 允许拖拽      | `false`                    |
| maxmin          | 最小化 最大化 | `false`                    |
| offset          | 位置          | --                         |
| area            | 尺寸          | --                         |
| v-model         | 展示 隐藏     | false                      |
| content         | 内容          | --                         |
| shade           | 开启遮盖      | --                         |
| shadeClose      | 遮盖点击关闭  | --                         |
| shadeOpacity    | 遮盖层透明度  | `0.1`                         |
| zIndex          | 自定义层级    | --                         |
| type            | 类型          | `1: component` `2: iframe` |
| closeBtn        | 显示关闭      | true                       |
| btn             | 按钮          |                            |
| btnAlign        | 按钮布局      | `l` `r` `c`                |
| anim            | 入场动画      | `0` `-` `6`                |
| isOutAnim       | 关闭动画      | `true` `false`             |
| isHtmlFragment  | 支持 html 解析      | -- |
| success            | 显示回调   | --                |
| end       | 关闭回调      | --             |