<template>
    <div :class="{ 'placeholder-warp': true }">
        <div v-if="!hasSlotContent"
class="placeholder-box">
            请把组件拖拽到框内
        </div>
        <slot></slot>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useSlots } from 'vue'

const slots = useSlots()

// 检查默认插槽是否有内容
const hasSlotContent = computed(() => !!slots.default?.().length)
</script>

<style lang="scss" scoped>
.placeholder-warp{
    height: 100%;
    width: 100%;
    min-height: 40px;
    .placeholder-box {
        background: #f4f4f4;
        color: #999;
        height: 100%;
        min-height: 40px;
        width: 100%;
        border: 1px dashed #ccc;
        box-sizing: border-box;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中，如果需要 */
    }
}
</style>
