4dkankan-components/packages/components/basic/bubble/index.vue

<template>
    <transition name="fade">
        <div class="bubble" :class="{ [type]: true, [level]: true }" v-if="show" @click.stop>
            <div class="bubble-layer">
                <div class="bubble-arr"></div>
                <slot></slot>
            </div>
        </div>
    </transition>
</template>

<script setup>
defineProps({
    type: {
        type: String,
        default: 'right',
    },
    show: {
        type: Boolean,
        default: true,
    },
    level: {
        type: String,
        require: false,
    },
})
</script>

<script>
export default { name: 'UiBubble' }
</script>