<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>
Proprver组件封装(文字提示带图标)
于 2023-11-30 16:13:11 首次发布