Vue3编写气泡对话框组件

Vue3气泡对话框组件，使用TypeScript枚举限定类型，样式用到了TailwindCSS组件代码templatedivclass=mt-5mb-5p-2bg-whitebord...

vue3气泡对话框组件，使用 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 javascriptborder-t -rotate-45 top-4 -l编程eft-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>

使用组件

<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”> 可以控制箭头位置。

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