Vue3編寫氣泡對話框組件

更新時間：2022年08月30日 09:37:33 作者：sonicwater

這篇文章主要為大家詳細介紹了Vue3編寫氣泡對話框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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 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 定義了氣泡對話框的箭頭位置。
組件接收參數(shù) placement，并用 PropType 結合枚舉類型限制該參數(shù)的值。
參數(shù) 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>

展示效果