Vue3怎么編寫氣泡對(duì)話框組件

這篇文章主要介紹“Vue3怎么編寫氣泡對(duì)話框組件”，在日常操作中，相信很多人在Vue3怎么編寫氣泡對(duì)話框組件問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue3怎么編寫氣泡對(duì)話框組件”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

Vue3氣泡對(duì)話框組件，使用 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 定義了氣泡對(duì)話框的箭頭位置。

• 組件接收參數(shù) placement，并用 PropType 結(jié)合枚舉類型限制該參數(shù)的值。

• 參數(shù) placement 可以不傳，默認(rèn)值是 top-start，即箭頭指向上方，位置在左端。

使用組件

<template>
  <PopoverWarpper>
    <div class="text-black text-lg">標(biāo)題</div>
    <div class="mt-2">內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
    <div class="mt-2">內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
  </PopoverWarpper>
</template>
<script>
import { defineComponent } from 'vue';
import PopoverWarpper from '@/components/PopoverWarpper.vue';
export default defineComponent({
  components:{ PopoverWarpper }
})
</script>

展示效果

給組件傳參 <PopoverWarpper placement=“right-end”> 可以控制箭頭位置。

到此，關(guān)于“Vue3怎么編寫氣泡對(duì)話框組件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！