# TinyLayer

**Repository Path**: se1per_php_code/tinylayer

## Basic Information

- **Project Name**: TinyLayer
- **Description**: 使用 Vue 开发的桌面端轻量级弹窗组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://dreamer365.gitee.io/tinylayer/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 21
- **Created**: 2022-08-17
- **Last Updated**: 2022-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<br>
<h1 align="center">TinyLayer</h1>
<p align="center">使用 Vue 开发的桌面端轻量级弹窗组件</p>
<p align="center">
  <img src="https://img.shields.io/badge/npm-v1.0.2-blue.svg">
  <img src="https://img.shields.io/badge/license-MIT-green.svg">
  <img src="https://img.shields.io/badge/vue-v2 / v3-orange.svg">
</p>
<p align="center">
  <a href="http://dreamer365.gitee.io/tinylayer/" target="_blank">在线示例</a>
</p>


<hr/>

## 模式预览
<p align="center">

<img src="https://gitee.com/dreamer365/tinylayer/raw/master/screenshot/pic.png">

</p>

<hr/>


## 组件特点
- 可同时兼容 vue2 和 vue3，无需为不同版本的 vue 安装不同的依赖包；
- 提供了 5 种弹窗模式，包括：Alert、Confirm、Prompt、全屏 Loading、默认模式；
- 丰富的配置功能，默认模式提供了多达 33 个可选配置项和 9 个可选事件，可满足各种开发需求。


<hr/>


## 安装引入
```bash
npm install tinylayer -S
```
**在 vue2 中引入**

```js
// main.js 中引入并注册 
import Vue from "vue";
import TinyLayer from "tinylayer";
Vue.use( TinyLayer );
```

**在 vue3 中引入**

```js
// main.js 中引入并注册 
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp( App );

import TinyLayer from "tinylayer";
app.use( TinyLayer );
```


<hr/>


## Loading 模式
**vue2 中的用法**

```vue
<template>
    <div>
        <button @click="openLoading">打开</button>
    </div>
</template>

<script>
    export default {
        methods: {
            openLoading () {
                this.$tinylayer.loading.open();
                window.setTimeout(() => {
                    this.$tinylayer.loading.close();
                }, 3000)
            }
        }
    }
</script>
```

**vue3 中的用法**

```vue
<template>
    <div>
        <button @click="openLoading">打开</button>
    </div>
</template>

<script setup>
    import { getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();

    const openLoading = () => {
        proxy.$tinylayer.loading.open();
        window.setTimeout(() => {
            proxy.$tinylayer.loading.close();
        }, 3000)
    }
</script>
```

## Loading 方法汇总

```js
// vue2 中的用法
this.$tinylayer.loading.open();
this.$tinylayer.loading.open( "Loading" );
this.$tinylayer.loading.open({
    text: "Loading",
    background: "rgba(0, 0, 0, .9)",
    zIndex: 9999999
});
this.$tinylayer.loading.close();


// vue3 中的用法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$tinylayer.loading.open();
proxy.$tinylayer.loading.open( "Loading" );
proxy.$tinylayer.loading.open({
    text: "Loading",
    background: "rgba(0, 0, 0, .9)",
    zIndex: 9999999
});
proxy.$tinylayer.loading.close();
```

## Loading 模式的配置属性（以对象形式传参）

<table>
    <tr>
        <td width="160">属性</td>
        <td width="200">说明</td>
        <td width="100">类型</td>
        <td width="220">默认值</td>
    </tr>
    <tr>
        <td>text</td>
        <td>提示语</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>background</td>
        <td>背景色</td>
        <td>String</td>
        <td>rgba(255, 255, 255, 0.95)</td>
    </tr>
    <tr>
        <td>zIndex</td>
        <td>层级</td>
        <td>Number</td>
        <td>2147483646</td>
    </tr>
</table>

<br>
<hr/>


## Alert 模式
<b>可用于替代浏览器自带的 `alert` 弹框</b>

**vue2 中的用法**

```vue
<template>
    <div>
        <button @click="openInfoLayer">Info 弹窗</button>
        <button @click="openSuccessLayer">Success 弹窗</button>
        <button @click="openWarningLayer">Warning 弹窗</button>
        <button @click="openErrorLayer">Error 弹窗</button>
    </div>
</template>

<script>
    export default {
        methods: {
            openInfoLayer () {
                this.$tinylayer.alert.info( "标题", "弹窗内容" );
            },
            openSuccessLayer () {
                this.$tinylayer.alert.success( "标题", "弹窗内容" );
            },
            openWarningLayer () {
                this.$tinylayer.alert.warning( "标题", "弹窗内容" );
            },
            openErrorLayer () {
                this.$tinylayer.alert.error( "标题", "弹窗内容" );
            }
        }
    }
</script>
```

**vue3 中的用法**

```vue
<template>
    <div>
        <button @click="openInfoLayer">Info 弹窗</button>
        <button @click="openSuccessLayer">Success 弹窗</button>
        <button @click="openWarningLayer">Warning 弹窗</button>
        <button @click="openErrorLayer">Error 弹窗</button>
    </div>
</template>

<script setup>
    import { getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();

    const openInfoLayer = () => {
        proxy.$tinylayer.alert.info( "标题", "弹窗内容" );
    }
    const openSuccessLayer = () => {
        proxy.$tinylayer.alert.success( "标题", "弹窗内容" );
    }
    const openWarningLayer = () => {
        proxy.$tinylayer.alert.warning( "标题", "弹窗内容" );
    }
    const openErrorLayer = () => {
        proxy.$tinylayer.alert.error( "标题", "弹窗内容" );
    }
</script>
```

## Alert 方法汇总

```js
// vue2.x 中的用法
this.$tinylayer.alert.info( "标题", "内容" );
this.$tinylayer.alert.success( "标题", "内容" );
this.$tinylayer.alert.warning( "标题", "内容" );
this.$tinylayer.alert.error( "标题", "内容" );
this.$tinylayer.alert.info({
    title: "标题",
    content: "内容",
    zIndex: 999999,
    maskBackground: "rgba(255, 255, 255, .85)",
    ok: {
        text: "我知道了"
    }
});


// vue3.x 中的用法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$tinylayer.alert.info( "标题", "内容" );
proxy.$tinylayer.alert.success( "标题", "内容" );
proxy.$tinylayer.alert.warning( "标题", "内容" );
proxy.$tinylayer.alert.error( "标题", "内容" );
proxy.$tinylayer.alert.info({
    title: "标题",
    content: "内容",
    zIndex: 999999,
    maskBackground: "rgba(255, 255, 255, .85)",
    ok: {
        text: "我知道了"
    }
});
```

## Alert 模式的配置属性（以对象形式传参）

<table>
    <tr>
        <td width="160">属性</td>
        <td width="270">说明</td>
        <td width="100">类型</td>
        <td width="160">默认值</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>content</td>
        <td>内容</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>zIndex</td>
        <td>层级</td>
        <td>Number</td>
        <td>20000</td>
    </tr>
    <tr>
        <td>maskBackground</td>
        <td>遮罩层背景色</td>
        <td>String</td>
        <td>rgba(0, 0, 0, 0.7)</td>
    </tr>
    <tr>
        <td>ok.text</td>
        <td>确定按钮的文字</td>
        <td>String</td>
        <td>确定</td>
    </tr>
</table>

<br>
<hr/>

## Confirm 模式
<b>可用于替代浏览器自带的 `confirm` 弹框</b>

**vue2 中的用法**

```vue
<template>
    <div>
        <button @click="openConfirm">打开</button>
    </div>
</template>

<script>
    export default {
        methods: {
            openConfirm () {
                this.$tinylayer.confirm.open({
                    title: "标题",
                    content: "弹窗内容",
                    cancel: {
                        callback: () => {
                            alert( "取消" );
                        }
                    },
                    ok: {
                        callback: () => {
                            alert( "确定" );
                        }
                    }
                })
            }
        }
    }
</script>
```

**vue3 中的用法**

```vue
<template>
    <div>
        <button @click="openConfirm">打开</button>
    </div>
</template>

<script setup>
    import { getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();

    const openConfirm = () => {
        proxy.$tinylayer.confirm.open({
            title: "标题",
            content: "弹窗内容",
            cancel: {
                callback: () => {
                    alert( "取消" );
                }
            },
            ok: {
                callback: () => {
                    alert( "确定" );
                }
            }
        })
    }
</script>
```

## Confirm 方法汇总

```js
// vue2.x 中的用法
this.$tinylayer.confirm.open({
    title: "标题",
    content: "内容",
    zIndex: 999999,
    maskBackground: "rgba(255,255,255,.85)",
    ok: {
        text: "我知道了"
    }
});
this.$tinylayer.confirm.close();


// vue3.x 中的用法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$tinylayer.confirm.open({
    title: "标题",
    content: "内容",
    zIndex: 999999,
    maskBackground: "rgba(255,255,255,.85)",
    ok: {
        text: "我知道了"
    }
});
proxy.$tinylayer.confirm.close();
```

## Confirm 模式的配置属性（以对象形式传参）

<table>
    <tr>
        <td width="180">属性</td>
        <td width="330">说明</td>
        <td>类型</td>
        <td width="160">默认值</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>content</td>
        <td>内容</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>zIndex</td>
        <td>层级</td>
        <td>Number</td>
        <td>20000</td>
    </tr>
    <tr>
        <td>maskBackground</td>
        <td>遮罩层背景色</td>
        <td>String</td>
        <td>rgba(0, 0, 0, 0.7)</td>
    </tr>
    <tr>
        <td>ok.text</td>
        <td>确定按钮的文字</td>
        <td>String</td>
        <td>确定</td>
    </tr>
    <tr>
        <td>ok.callback</td>
        <td>点击确定按钮执行的回调事件</td>
        <td>Function</td>
        <td>空函数</td>
    </tr>
    <tr>
        <td>cancel.text</td>
        <td>取消按钮的文字</td>
        <td>String</td>
        <td>取消</td>
    </tr>
    <tr>
        <td>cancel.callback</td>
        <td>点击取消按钮执行的回调事件</td>
        <td>Function</td>
        <td>空函数</td>
    </tr>
</table>

<br>
<hr/>

## Prompt 模式

<b>可用于替代浏览器自带的 `prompt` 弹框</b>

**vue2 中的用法**

```vue
<template>
    <div>
        <button @click="openPrompt">打开</button>
    </div>
</template>

<script>
    export default {
        methods: {
            openPrompt () {
                this.$tinylayer.prompt.open({
                    title: "请输入姓名",
                    ok: {
                        callback: ( config, value ) => {
                            value && alert( value );
                        }
                    }
                })
            }
        }
    }
</script>
```

**vue3 中的用法**

```vue
<template>
    <div>
        <button @click="openPrompt">打开</button>
    </div>
</template>

<script setup>
    import { getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();

    const openPrompt = () => {
        proxy.$tinylayer.prompt.open({
            title: "请输入姓名",
            ok: {
                callback: ( config, value ) => {
                    value && alert( value );
                }
            }
        })
    }
</script>
```

## Prompt 方法汇总

```js
// vue2.x 中的用法
this.$tinylayer.prompt.open({
    title: "标题",
    content: "内容",
    ok: {
        text: "验证"
    }
});
this.$tinylayer.prompt.close();


// vue3.x 中的用法
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$tinylayer.prompt.open({
    title: "标题",
    content: "内容",
    ok: {
        text: "验证"
    }
});
proxy.$tinylayer.prompt.close();
```

## Prompt 模式的配置属性（以对象形式传参）

<table>
    <tr>
        <td width="135">属性</td>
        <td width="420">说明</td>
        <td>类型</td>
        <td width="150">默认值</td>
    </tr>
    <tr>
        <td>title</td>
        <td>标题</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>zIndex</td>
        <td>层级</td>
        <td>Number</td>
        <td>20000</td>
    </tr>
    <tr>
        <td>maskBackground</td>
        <td>遮罩层背景色</td>
        <td>String</td>
        <td>rgba(0, 0, 0, 0.7)</td>
    </tr>
    <tr>
        <td>defaultValue</td>
        <td>输入框默认值</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>placeholder</td>
        <td>输入框提示语</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>inputType</td>
        <td>输入框类型，可选值：text, password</td>
        <td>String</td>
        <td>text</td>
    </tr>
    <tr>
        <td>pattern</td>
        <td>用于校验输入值的正则表达式</td>
        <td>RegExp</td>
        <td>-</td>
    </tr>
    <tr>
        <td>errorMsg</td>
        <td>错误提示语</td>
        <td>String</td>
        <td>""</td>
    </tr>
    <tr>
        <td>ok.text</td>
        <td>确定按钮的文字</td>
        <td>String</td>
        <td>确定</td>
    </tr>
    <tr>
        <td>ok.callback</td>
        <td>点击确定按钮执行的回调事件，参数：<br>1. prompt 所有属性的集合<br>2. 输入框的值<br>3. 如果设置了 pattern 属性，则返回校验结果的布尔值</td>
        <td>Function</td>
        <td>空函数</td>
    </tr>
    <tr>
        <td>ok.closable</td>
        <td>点击确定按钮可关闭弹窗</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>cancel.text</td>
        <td>取消按钮的文字</td>
        <td>String</td>
        <td>取消</td>
    </tr>
    <tr>
        <td>cancel.callback</td>
        <td>点击取消按钮执行的回调事件</td>
        <td>Function</td>
        <td>空函数</td>
    </tr>
</table>

<br>
<hr/>

## 默认模式

**vue2 中的用法**

```vue
<template>
    <div>
        <button @click="openLayer">打开弹窗</button>

        <TinyLayer v-model="layerVisible" title="标题">
            <div>这里是弹窗内容...</div>
            <div>这里是弹窗内容...</div>
            <div>这里是弹窗内容...</div>
        </TinyLayer>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                layerVisible: false
            }
        },
        methods: {
            openLayer () {
                this.layerVisible = true;
            }
        }
    }
</script>
```

**vue3 中的用法**

```vue
<template>
    <div>
        <button @click="openLayer">打开弹窗</button>

        <TinyLayer v-model="layerVisible" title="标题">
            <div>这里是弹窗内容...</div>
            <div>这里是弹窗内容...</div>
            <div>这里是弹窗内容...</div>
        </TinyLayer>
    </div>
</template>

<script setup>
    import { ref } from "vue";

    const layerVisible = ref( false );
    const openLayer = () => {
        layerVisible.value = true;
    }
</script>
```

<hr/>


## 默认模式的配置属性

<table>
    <tr>
        <td width="200">属性</td>
        <td>说明</td>
        <td>类型</td>
        <td width="160">默认值</td>
    </tr>
    <tr>
        <td>id</td>
        <td>自定义的弹窗唯一 id 标识</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>class-name</td>
        <td>自定义的弹窗类名（多个类名之间用空格分隔）</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>z-index</td>
        <td>弹窗的层级</td>
        <td>Number</td>
        <td>10000</td>
    </tr>
    <tr>
        <td>mask-visible</td>
        <td>显示遮罩层</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>mask-closable</td>
        <td>点击遮罩层可以关闭弹窗</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>mask-background</td>
        <td>遮罩层背景色</td>
        <td>String</td>
        <td>rgba(0, 0, 0, 0.75)</td>
    </tr>
    <tr>
        <td>fullscreen</td>
        <td>默认全屏显示（并非浏览器按下 F11 的全屏模式，而是铺满网页可视区域）</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>insert-iframe</td>
        <td>内容区域嵌入 iframe 的地址（一旦嵌入 iframe，设置的其它内容将失效）</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>background</td>
        <td>弹窗的背景色</td>
        <td>String</td>
        <td>#fff</td>
    </tr>
    <tr>
        <td>auto-close</td>
        <td>自动关闭的倒计时时长，单位：ms（设置为 0 则不开启此功能）</td>
        <td>Number</td>
        <td>0</td>
    </tr>
    <tr>
        <td>auto-close-intercept</td>
        <td>自动关闭功能的拦截器，到达自动关闭所设置的时长后将拦截关闭功能</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>destroy-after-close</td>
        <td>关闭弹窗后销毁弹窗</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>esc-closable</td>
        <td>按下 Esc 键可关闭弹窗</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>draggable</td>
        <td>开启拖动功能（按住头部区域即可拖动）</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>body-scrollable</td>
        <td>打开弹窗后允许页面滚动</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>header-visible</td>
        <td>显示头部</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>footer-visible</td>
        <td>显示尾部</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>content-background</td>
        <td>内容区域的背景色</td>
        <td>String</td>
        <td>""</td>
    </tr>
    <tr>
        <td>content-loading</td>
        <td>显示内容区域的 loading 层</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>content-loading-text</td>
        <td>内容区域的 loading 层的提示信息</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>content-loading-background</td>
        <td>内容区域的 loading 层的背景色</td>
        <td>String</td>
        <td>rgba(255, 255, 255, 0.95)</td>
    </tr>
    <tr>
        <td>content-height</td>
        <td>内容区域高度（可设置百分比或 px 单位）</td>
        <td>String</td>
        <td>auto</td>
    </tr>
    <tr>
        <td>noline</td>
        <td>去除头尾与内容区域的分割线</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>title</td>
        <td>弹窗标题</td>
        <td>String</td>
        <td>-</td>
    </tr>
    <tr>
        <td>width</td>
        <td>弹窗宽度（可设置百分比或 px 单位，最小有效值为 300px）</td>
        <td>String</td>
        <td>450px</td>
    </tr>
    <tr>
        <td>close-icon-visible</td>
        <td>头部右侧显示关闭图标</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>fullscreen-icon-visible</td>
        <td>头部右侧显示全屏切换图标</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>ok-text</td>
        <td>确定按钮文本</td>
        <td>String</td>
        <td>确定</td>
    </tr>
    <tr>
        <td>ok-visible</td>
        <td>显示确定按钮</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>ok-disabled</td>
        <td>禁用确定按钮</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>ok-closable</td>
        <td>点击确定按钮可以关闭弹窗</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
    <tr>
        <td>ok-loading（v1.0.1 新增）</td>
        <td>确定按钮加载中效果</td>
        <td>Boolean</td>
        <td>false</td>
    </tr>
    <tr>
        <td>cancel-text</td>
        <td>取消按钮文本</td>
        <td>String</td>
        <td>取消</td>
    </tr>
    <tr>
        <td>cancel-visible</td>
        <td>显示取消按钮</td>
        <td>Boolean</td>
        <td>true</td>
    </tr>
</table>

## 默认模式的事件
<table>
    <tr>
        <td width="220">事件名</td>
        <td width="300">说明</td>
        <td>回调参数</td>
    </tr>
    <tr>
        <td>fullscreen-change</td>
        <td>全屏状态改变时的回调</td>
        <td>代表全屏状态的布尔值</td>
    </tr>
    <tr>
        <td>ok</td>
        <td>点击确定按钮的回调</td>
        <td>-</td>
    </tr>
    <tr>
        <td>cancel</td>
        <td>点击取消按钮的回调</td>
        <td>-</td>
    </tr>
    <tr>
        <td>after-open</td>
        <td>弹窗打开动画结束后的回调</td>
        <td>-</td>
    </tr>
    <tr>
        <td>after-close</td>
        <td>弹窗关闭动画结束后的回调</td>
        <td>-</td>
    </tr>
    <tr>
        <td>dragging</td>
        <td>拖动弹窗时的回调</td>
        <td>弹窗左上角的横纵坐标值</td>
    </tr>
    <tr>
        <td>drag-end</td>
        <td>弹窗拖动结束时的回调</td>
        <td>弹窗左上角的横纵坐标值</td>
    </tr>
    <tr>
        <td>auto-close-countdown</td>
        <td>自动关闭的倒计时回调</td>
        <td>倒计时的毫秒数和秒数</td>
    </tr>
    <tr>
        <td>auto-close-intercept</td>
        <td>到达自动关闭所设置的时长时的回调</td>
        <td>-</td>
    </tr>
</table>

## 默认模式的插槽
<table>
    <tr>
        <td width="120">插槽名</td>
        <td width="497">说明</td>
    </tr>
    <tr>
        <td>header</td>
        <td>弹窗头部内容</td>
    </tr>
    <tr>
        <td>footer</td>
        <td>弹窗尾部内容</td>
    </tr>
</table>

<hr>

## 浏览器支持

| Chrome | Firefox | Opera | Edge | Safari | IE  |
| ---    | ---     | ---   | ---  | ---    | --- |
| last 2 versions    | last 2 versions     | last 2 versions   | last 2 versions  | last 2 versions    | 不支持 |