Vue3怎么编写气泡对话框组件(vue3,开发技术)

接下来，请跟着小编一起来学习吧！

Vue3气泡对话框组件，使用 TypeScript枚举限定类型，样式用到了 TailwindCSS

组件代码

<template>
<divclass="mt-5mb-5p-2bg-whiteborder-solidborder-gray-300border-lborder-tborder-rborder-bborder-light-blue-500rounded-mdrelative">
<div:class="{
'w-2.5h-2.5border-gray-300bg-whitetransformabsolute':true,
'border-lborder-trotate-45-top-1.5left-4':placement==='top-start',
'border-lborder-trotate-45-top-1.5inset-x-2/4-translate-x-1.5':placement==='top',
'border-lborder-trotate-45-top-1.5right-4':placement==='top-end',
'border-lborder-t-rotate-45top-4-left-1.5':placement==='left-start',
'border-lborder-t-rotate-45inset-y-2/4-left-1.5-translate-y-1.5':placement==='left',
'border-lborder-t-rotate-45bottom-4-left-1.5':placement==='left-end',
'border-rborder-brotate-45-bottom-1.5left-4':placement==='bottom-start',
'border-rborder-brotate-45-bottom-1.5inset-x-2/4-translate-x-1.5':placement==='bottom',
'border-rborder-brotate-45-bottom-1.5right-4':placement==='bottom-end',
'border-rborder-b-rotate-45top-4-right-1.5':placement==='right-start',
'border-rborder-b-rotate-45inset-y-2/4-right-1.5-translate-y-1.5':placement==='right',
'border-rborder-b-rotate-45bottom-4-right-1.5':placement==='right-end',
}"></div>
<slot></slot>
</div>
</template>
<scriptlang="ts">
import{
defineComponent,
PropType
}from'vue';
enumEnumPlacement{
TopStart="top-start",
Top="top",
TopEnd="top-end",
LeftStart="left-start",
Left="left",
LeftEnd="left-end",
BottomStart="bottom-start",
Bottom="bottom",
BottomEnd="bottom-end",
RightStart="right-start",
Right="right",
RightEnd="right-end"
}
exportdefaultdefineComponent({
name:'popover-warpper',
props:{
placement:{
type:StringasPropType<EnumPlacement>,
default:'top-start'
}
}
});
</script>

• 所有样式均使用 TailwindCSS。

• 枚举类型 EnumPlacement 定义了气泡对话框的箭头位置。

• 组件接收参数 placement，并用 PropType 结合枚举类型限制该参数的值。

• 参数 placement 可以不传，默认值是 top-start，即箭头指向上方，位置在左端。

使用组件

<template>
<PopoverWarpper>
<divclass="text-blacktext-lg">标题</div>
<divclass="mt-2">内容内容内容内容</div>
<divclass="mt-2">内容内容内容内容</div>
</PopoverWarpper>
</template>
<script>
import{defineComponent}from'vue';
importPopoverWarpperfrom'@/components/PopoverWarpper.vue';
exportdefaultdefineComponent({
components:{PopoverWarpper}
})
</script>

展示效果

给组件传参 <PopoverWarpper placement=“right-end”> 可以控制箭头位置。

若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！