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
定義瞭氣泡對話框的箭頭位置。 - 組件接收參數
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”>
可以控制箭頭位置。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。