自定义头部

自定义整个头部

提示：

使用 header 插槽。

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

    <TinyLayer v-model="visible">
        <template #header>
            <p><b style="color:#f00">自定义头部</b></p>
        </template>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

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

增加图标按钮

提示：

通过 header-icon 插槽可以在弹窗头部的右侧增加自定义的图标按钮，它不会影响到内置的全屏按钮和关闭按钮。但是 header-icon 插槽会受到 header 插槽的影响，一旦设置了 header 插槽，意味着整个头部区域将变为自定义的，此时 header-icon 插槽也将无效。

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

    <TinyLayer v-model="visible" title="弹窗标题">
        <template #header-icon>
            <i>
				<svg viewBox="0 0 1024 1024" width="20" height="20">
					<path d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z" fill="#565656"></path><path d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z" fill="#565656"></path>
				</svg>
			</i>
            <i>
                <svg viewBox="0 0 1024 1024" width="20" height="20">
                    <path d="M750.535901 653.616324c-43.287782 0-82.48588 17.828115-110.653913 46.518366L395.697941 559.249472c6.530798-16.423246 10.125911-34.322014 10.125911-53.044044 0-15.762794-2.554773-30.938861-7.255759-45.144216l229.464666-153.118433c25.846722 24.615926 60.805638 39.746939 99.232696 39.746939 79.398649 0 143.993952-64.595303 143.993952-143.993952 0-79.410937-64.595303-144.016479-143.993952-144.016479s-143.993952 64.605543-143.993952 144.016479c0 15.822183 2.573204 31.053544 7.309005 45.306001L361.184446 402.074121c-25.85901-24.683507-60.8681-39.862646-99.354547-39.862646-79.398649 0-143.993952 64.595303-143.993952 143.993952s64.595303 143.993952 143.993952 143.993952c35.346995 0 67.753186-12.809702 92.839109-34.020971L603.357443 759.663454c-5.162791 15.437176-7.966385 31.944386-7.966385 49.09669 0 85.547511 69.598357 155.145868 155.145868 155.145868 85.546487 0 155.144844-69.598357 155.144844-155.145868C905.680745 723.213657 836.082389 653.616324 750.535901 653.616324zM727.264431 138.219859c36.090388 0 65.451331 29.372206 65.451331 65.474882 0 36.090388-29.360943 65.452355-65.451331 65.452355s-65.451331-29.361967-65.451331-65.452355C661.8131 167.592065 691.174043 138.219859 727.264431 138.219859zM261.828875 571.656758c-36.090388 0-65.452355-29.360943-65.452355-65.451331s29.361967-65.452355 65.452355-65.452355 65.452355 29.361967 65.452355 65.452355S297.919263 571.656758 261.828875 571.656758zM750.535901 886.333078c-42.773756 0-77.572934-34.798154-77.572934-77.572934 0-42.772732 34.798154-77.57191 77.572934-77.57191 42.772732 0 77.57191 34.798154 77.57191 77.57191C828.107811 851.534924 793.309657 886.333078 750.535901 886.333078z" fill="#565656"></path>
                </svg>
            </i>
        </template>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

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