humi_components/popups/index.vue

<script setup>
import Close from '../icons/Close.vue';
import { ref } from 'vue';

const props = defineProps({
    // 提示文字
    tips: {
        type: String,
        default: ''
    },
    // 是否显示
    visible: {
        type: Boolean,
        default: false,
        required: true
    }
});

const emits = defineEmits(['update:visible']);

// 关闭
const close = () => {
    emits('update:visible', false);
};

</script>

<template>
    <div class="popup">
        <Close @click="close" class="icon" />
        <span>{{ tips }}</span>
    </div>
</template>

<style scoped>
.popup {
    background-color: var(--sider-bg);
    border: 1px solid #241917;
    box-shadow: 0 5px 8px var(--button-normal-shadow);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1.2vw 8vw;
    margin: 1.25vw;
    border-radius: 8px;
}

.icon {
    position: absolute;
    top: .4vw;
    right: .4vw;
    cursor: pointer;
    color: #241917;
}

.icon:hover {
    transform: rotate(180deg);
    transition: all 0.5s ease-out;
}
</style>