Vue3編寫氣泡對(duì)話框組件
更新時(shí)間:2022年08月30日 09:37:33 作者:sonicwater
這篇文章主要為大家詳細(xì)介紹了Vue3編寫氣泡對(duì)話框組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
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”>
可以控制箭頭位置。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03Vue通過moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題
這篇文章主要介紹了Vue項(xiàng)目Element表格對(duì)應(yīng)字段映射顯示方法:formatter格式化數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07