TinyLayer 文档

外观

Prompt 模式 ​

提示：

  1. 可用于替代浏览器内置的 window.prompt 弹框；
  2. 只能同时创建一个 prompt 弹窗；
  3. 不能使用 esc 按键关闭。

基础用法 ​

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

文本域输入框 ​

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            inputType: "textarea",
            width: "550px",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

自定义遮罩层背景色 ​

注意：

默认情况下，遮罩层背景色是通过 css 变量设置的，如果想通过参数的形式自定义遮罩层背景色，则对应的 css 变量将失效，并且在深 / 浅色模式切换时，将不会自动适配，此时背景色将始终是参数指定的颜色值。

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            maskBackground: "rgba(190, 190, 255, .9)",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

自定义按钮文字 ​

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            ok: {
                text: "立即提交",
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            },
            cancel: {
                text: "我再想想"
            }
        } );
    }
</script>

自定义宽度 ​

提示：

支持所有 css 宽度单位，如：px、em、rem、vw 等等，也可以设置成百分比形式，如：80%。

注意：

组件会对传入的宽度值进行计算检测，根据检测结果按照如下规则进行设置：

  1. 符合要求则正常设置传入的宽度值；
  2. 如果宽度值大于页面可视区域宽度，将自动调整为【页面可视区域宽度 - 40px】；
  3. 如果宽度值小于 300px，将自动调整为 300px，因为弹窗的最小有效宽度是 300px。
vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            width: "800px",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

动画模式 ​

vue
<template>
    <button @click="openScale">scale 模式</button>
    <button @click="openSlide">slide 模式</button>
    <button @click="openFade">fade 模式</button>
</template>

<script setup>
    const openScale = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            animationType: "scale",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
    const openSlide = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            animationType: "slide",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
    const openFade = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            animationType: "fade",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

打开和关闭后的回调事件 ​

提示：

这两个回调事件会在打开和关闭 【动画结束后】 触发。

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            afterOpen: () => {
                alert( "打开了 prompt" );
            },
            afterClose: () => {
                alert( "关闭了 prompt" );
            },
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

调用 close 方法关闭 ​

提示：

可根据实际需要，通过手动调用 $tinylayer.prompt.close() 方法关闭 prompt 弹窗。

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            ok: {
                closable: false,
                callback: ( okConfig, promptConfig ) => {
                    promptConfig.cancel.disabled = true;
                    okConfig.disabled = true;
                    okConfig.loading = true;
                    okConfig.text = "稍后关闭";
                    setTimeout( () => {
                        $tinylayer.prompt.close();
                    }, 3000 )
                }
            }
        } );
    }
</script>

设置默认值 ​

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请随便输入些内容",
            defaultValue: "12345",
            ok: {
                callback: ( okConfig, promptConfig, value ) => {
                    value && alert( value );
                }
            }
        } );
    }
</script>

输入值校验 ​

vue
<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.prompt.open( {
            title: "请输入密码",
            placeholder: "在此输入访问权限密码",
            inputType: "password",
            pattern: /^[A-Za-z0-9]{5,18}$/,
            errorMsg: "密码格式错误（请输入 5-18 位的数字或英文字母）",
            cancel: {
                text: "取消验证"
            },
            ok: {
                text: "验证身份",
                closable: false,
                callback: ( okConfig, promptConfig, value, passed ) => {
                    if ( passed === true ) {
                        okConfig.disabled = true;
                        okConfig.loading = true;
                        okConfig.text = "正在验证";
                        promptConfig.cancel.disabled = true;
                        promptConfig.inputDisabled = true;
                        setTimeout( () => {
                            alert( `输入值：${ value } 已校验通过` );
                            $tinylayer.prompt.close();
                        }, 3000 )
                    }
                }
            }
        } );
    }
</script>

属性 ​

属性说明类型默认值
title标题String-
zIndex层级Number2000
maskBackground遮罩层背景色String-
defaultValue输入框默认值String-
placeholder输入框提示语String-
inputType输入框类型，可选值：text、password、textareaStringtext
inputDisabled禁用输入框Booleanfalse
pattern用于校验输入值的正则表达式RegExp-
errorMsg错误提示语String-
tip输入框辅助提示语String-
width弹框宽度（最小有效值：300px）String370px
animationType动画模式，可选值：scale, slide, fadeStringscale
afterOpen打开后的回调事件Function空函数
afterClose关闭后的回调事件Function空函数
ok.text确定按钮的文字String确定
ok.callback点击确定按钮的回调事件，参数：
1. 确定按钮的配置项
2. 弹窗的所有配置项
3. 输入框的值
4. 如果设置了 pattern 属性，则返回代表校验结果的布尔值		Function空函数
ok.closable点击确定按钮可关闭弹窗Booleantrue
ok.disabled禁用确定按钮Booleanfalse
ok.loading激活确定按钮的加载中效果Booleanfalse
cancel.text取消按钮的文字String取消
cancel.disabled禁用取消按钮Booleanfalse
cancel.callback点击取消按钮的回调事件Function空函数

方法 ​

js
// 打开
$tinylayer.prompt.open();

// 关闭
$tinylayer.prompt.close();

Released under the MIT License.

Copyright © 2022-present ZG