基础用法

基本设置

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

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

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

自定义宽度

提示：

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

注意：

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

1. 符合要求则正常设置指定的宽度值；
2. 如果宽度值大于页面可视区域宽度，将自动调整为【页面可视区域宽度 - 40px】；
3. 如果宽度值小于 300px，将自动调整为 300px，因为弹窗的最小有效宽度是 300px。

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

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

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

全屏弹窗

注意：

• 全屏显示功能并非指浏览器级别的全屏模式，而是指：铺满浏览器可视区域；
• 设置了 fullcreen 属性后，width 和 draggable 属性将自动失效。

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

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

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

显示全屏切换按钮

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

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

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

隐藏头尾

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

    <TinyLayer 
        v-model="visible"
        :header-visible="false" 
        :footer-visible="false"
    >
        <button @click="close">点击关闭弹窗</button>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
    const close = () => {
        visible.value = false;
    }
</script>

隐藏分割线

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

    <TinyLayer v-model="visible" title="弹窗标题" noline>
        <div>这是一个没有分割线的弹窗</div>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

嵌入 Iframe

注意：

嵌入 iframe 后，内容插槽将失效。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        insert-iframe="https://cn.bing.com" 
        width="1200px" 
        content-height="650px"
    ></TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

自定义按钮名称

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题"
        ok-text="我已了解"
        cancel-text="我再想想"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

自定义内容区域背景色

注意：

自定义的内容区域背景色在深 / 浅色模式切换时不会自动适配。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        content-background="#ededed"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

自定义内容区域高度

注意：

组件会根据 content-height 值加上头尾区域的高度自动计算出弹窗的整体高度，此整体高度的最大值是【页面可视区域高度 - 40px】。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        content-height="5000px"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>