# layer-vue

**Repository Path**: andygoo/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-22
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<img src="./image.png" alt="layui">

<br>
<br>

<p>  
  <a href="https://www.npmjs.com/package/@layui/layer-vue"><img src="https://img.shields.io/npm/v/@layui/layer-vue.svg?sanitize=true"></a>
  <a href="https://www.npmjs.com/package/@layui/layer-vue"><img src="https://img.shields.io/npm/l/@layui/layer-vue.svg?sanitize=true"></a>
  <a href="https://travis-ci.org/sentsin/layui"><img src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
  <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
</p>

layer - vue 是一款基于 vue 3.0 的 Web 弹层组件, 内置 dialog, page, iframe, loading, msg, drawer 等反馈组件

### 安装

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 的展示与隐藏

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

核心函数：

```
// 消息
layer.msg(msg，option, callback)

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

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

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

// 抽屉
layer.drawer(option, callback)

// 关闭
layer.close(id);

// 关闭所有
layer.closeAll();
```

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

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

const openSuccess = function () {
  layer.msg("成功消息",{icon:1,time:1000});
};
</script>

```

## [阅读文档](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           | 类型          | `0: dialog` `1: page` `2: iframe` `3: loading` `4: drawer` |
| closeBtn       | 显示关闭      | true                                                       |
| btn            | 按钮          |                                                            |
| btnAlign       | 按钮布局      | `l` `r` `c`                                                |
| anim           | 入场动画      | `0` `1` `2` `3` `4` `5` `6`                                               |
| isOutAnim      | 关闭动画      | `true` `false`                                             |
| isHtmlFragment | html 解析     |                                                            |
| success        | 显示回调      | --                                                         |
| end            | 关闭回调      | --                                                         |