Vue3编写气泡对话框组件

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

组件代码

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

使用组件

展示效果

给组件传参 可以控制箭头位置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。