Vue3编写气泡对话框组件

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

组件代码

template

div

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:StringasPropTypeEnumPlacement,

default:'top-start'

}

/script

所有样式均使用TailwindCSS。枚举类型EnumPlacement定义了气泡对话框的箭头位置。组件接收参数placement，并用PropType结合枚举类型限制该参数的值。参数placement可以不传，默认值是top-start，即箭头指向上方，位置在左端。

使用组件

template

PopoverWarpper

div标题/div

div内容内容内容内容/div

div内容内容内容内容/div

/PopoverWarpper

/template

script

import{defineComponent}from'vue';

importPopoverWarpperfrom'@/components/PopoverWarpper.vue';

exportdefaultdefineComponent({

components:{PopoverWarpper}

/s