Proprver组件封装（文字提示带图标）

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
const Close = (): void => {
    visible.value = false;
};
const Open = (): void => {
    visible.value = true;
}

// 动态暴露组件属性
const porp = defineProps({
    title: {
        type: String,
        default: '是否要删除该分类？'
    },
    Icon: {
        type: String,
        default: 'Close'
    }
})
const popoverOpen = (): void => {
    visible.value = true;
}
// 向父组件欂栌点击等等事件
const emit = defineEmits(['popoverClose', 'popoveronEmits'])
const popoverClose = () => emit('popoverClose')
const popoveronEmits = () => emit('popoveronEmits')
// 将方法暴露出去
defineExpose({
    Close,
    Open,
})
</script>
<template>
    <el-popover :visible="visible" placement="top" :title="title" :width="160">
        <!-- <p>是否确认删除?</p> -->
        <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="popoverClose">
                取消
            </el-button>
            <el-button size="small" type="primary" @click="popoveronEmits">
                确认
            </el-button>
        </div>
        <template #reference>
            <!-- <component :is="Close"></component> -->
            <el-icon class="col-icon" @click="popoverOpen">
                <!-- 动态插入图标 -->
                <component :is="Icon"></component>
            </el-icon>
        </template>
    </el-popover>
</template>
<style></style>