Vue3气泡对话框组件
sonicwater 人气:0Vue3
气泡对话框组件,使用 TypeScript
枚举限定类型,样式用到了 TailwindCSS
组件代码
<template> <div class="mt-5 mb-5 p-2 bg-white border-solid border-gray-300 border-l border-t border-r border-b border-light-blue-500 rounded-md relative"> <div :class="{ 'w-2.5 h-2.5 border-gray-300 bg-white transform absolute': true, 'border-l border-t rotate-45 -top-1.5 left-4': placement === 'top-start', 'border-l border-t rotate-45 -top-1.5 inset-x-2/4 -translate-x-1.5': placement === 'top', 'border-l border-t rotate-45 -top-1.5 right-4': placement === 'top-end', 'border-l border-t -rotate-45 top-4 -left-1.5': placement === 'left-start', 'border-l border-t -rotate-45 inset-y-2/4 -left-1.5 -translate-y-1.5': placement === 'left', 'border-l border-t -rotate-45 bottom-4 -left-1.5': placement === 'left-end', 'border-r border-b rotate-45 -bottom-1.5 left-4': placement === 'bottom-start', 'border-r border-b rotate-45 -bottom-1.5 inset-x-2/4 -translate-x-1.5': placement === 'bottom', 'border-r border-b rotate-45 -bottom-1.5 right-4': placement === 'bottom-end', 'border-r border-b -rotate-45 top-4 -right-1.5': placement === 'right-start', 'border-r border-b -rotate-45 inset-y-2/4 -right-1.5 -translate-y-1.5': placement === 'right', 'border-r border-b -rotate-45 bottom-4 -right-1.5': placement === 'right-end', }"></div> <slot></slot> </div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue'; enum EnumPlacement { 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" } export default defineComponent({ name: 'popover-warpper', props: { placement:{ type: String as PropType<EnumPlacement>, default: 'top-start' } } }); </script>
- 所有样式均使用
TailwindCSS
。 - 枚举类型
EnumPlacement
定义了气泡对话框的箭头位置。 - 组件接收参数
placement
,并用PropType
结合枚举类型限制该参数的值。 - 参数
placement
可以不传,默认值是top-start
,即箭头指向上方,位置在左端。
使用组件
<template> <PopoverWarpper> <div class="text-black text-lg">标题</div> <div class="mt-2">内容内容内容内容</div> <div class="mt-2">内容内容内容内容</div> </PopoverWarpper> </template> <script> import { defineComponent } from 'vue'; import PopoverWarpper from '@/components/PopoverWarpper.vue'; export default defineComponent({ components:{ PopoverWarpper } }) </script>
展示效果
给组件传参 <PopoverWarpper placement=“right-end”>
可以控制箭头位置。
加载全部内容