Popover 悬浮提示 #

<template> <div class="popover-demo-item"> <d-popover content="default"> <d-button>default</d-button> </d-popover> <d-popover content="info!" pop-type="info" :position="['top']"> <d-button variant="solid">info</d-button> </d-popover> <d-popover content="error!" pop-type="error" :position="['left']" style="z-index: 9999"> <d-button variant="solid" color="danger">error</d-button> </d-popover> <d-popover content="success!" pop-type="success" :position="['right']"> <d-button>success</d-button> </d-popover> <d-popover content="warning!" pop-type="warning"> <d-button>warning</d-button> </d-popover> <d-popover content="no-animation!" :show-animation="false" style="max-width: 100px"> <d-button>no-animation</d-button> </d-popover> <d-popover content="disabled" disabled> <d-button>disabled</d-button> </d-popover> </div> </template> <style> .popover-demo-item > * { display: inline-block; margin-right: 8px; } </style> 

<template> <div class="popover-demo-item"> <d-popover content="自定义内容"> <d-button variant="solid">click me!</d-button> </d-popover> <d-popover content="自定义内容" trigger="hover" style="background-color: #7693f5; color: #fff"> <d-button>hover me!</d-button> </d-popover> </div> </template> 

<template> <div class="popover-demo-item-horizontal"> <d-popover :position="['top-start']" align="start"> <template #content> <div> <div>top-start</div> <div>top-start</div> </div> </template> <d-button style="width: 100px;">top-start</d-button> </d-popover> <d-popover :position="['top']"> <template #content> <div>top</div> </template> <d-button style="width: 100px;">top</d-button> </d-popover> <d-popover :position="['top-end']" align="end"> <template #content> <div> <div>top-end</div> <div>top-end</div> </div> </template> <d-button style="width: 100px;">top-end</d-button> </d-popover> </div> <div class="popover-demo-vertical-wrapper"> <div class="popover-demo-item-vertical"> <d-popover :position="['left-start']" align="start"> <template #content> <div> <div>left-start</div> <div>left-start</div> </div> </template> <d-button style="width: 100px;">left-start</d-button> </d-popover> <d-popover :position="['left']"> <template #content> <div>left</div> </template> <d-button style="width: 100px;">left</d-button> </d-popover> <d-popover :position="['left-end']" align="end"> <template #content> <div> <div>left-end</div> <div>left-end</div> </div> </template> <d-button style="width: 100px;">left-end</d-button> </d-popover> </div> <div class="popover-demo-item-vertical"> <d-popover :position="['right-start']" align="start"> <template #content> <div> <div>right-start</div> <div>right-start</div> </div> </template> <d-button style="width: 100px;">right-start</d-button> </d-popover> <d-popover :position="['right']"> <template #content> <div>right</div> </template> <d-button style="width: 100px;">right</d-button> </d-popover> <d-popover :position="['right-end']" align="end"> <template #content> <div> <div>right-end</div> <div>right-end</div> </div> </template> <d-button style="width: 100px;">right-end</d-button> </d-popover> </div> </div> <div class="popover-demo-item-horizontal"> <d-popover :position="['bottom-start']" align="start"> <template #content> <div> <div>bottom-start</div> <div>bottom-start</div> </div> </template> <d-button style="width: 100px;">bottom-start</d-button> </d-popover> <d-popover :position="['bottom']"> <template #content> <div>bottom</div> </template> <d-button style="width: 100px;">bottom</d-button> </d-popover> <d-popover :position="['bottom-end']" align="end"> <template #content> <div> <div>bottom-end</div> <div>bottom-end</div> </div> </template> <d-button style="width: 100px;">bottom-end</d-button> </d-popover> </div> </template> <style> .popover-demo-item-horizontal { display: flex; justify-content: center; align-items: center; width: 400px; margin-bottom: 4px; } .popover-demo-item-horizontal > * { margin-right: 4px; } .popover-demo-vertical-wrapper { display: flex; justify-content: space-between; align-items: center; width: 400px; } .popover-demo-item-vertical { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 4px; } .popover-demo-item-vertical > * { margin-bottom: 4px; } </style> 

<template> <div class="popover-demo-item"> <d-popover :position="['bottom']" trigger="hover" :mouse-enter-delay="500"> <template #content> <div>Mouse enter 500ms later.</div> show Me </template> <d-button variant="solid">MouseEnter delay 500ms</d-button> </d-popover> <d-popover :position="['bottom']" trigger="hover" :mouse-leave-delay="2000"> <template #content> <div>Mouse leave 2000ms later.</div> </template> <d-button>MouseLeave delay 2000ms</d-button> </d-popover> </div> </template> 

<template> <d-popover :is-open="isOpen" trigger="manually" content="manually control"> <d-button @click="onClick">Click Me</d-button> </d-popover> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const isOpen = ref(false); const onClick = () => (isOpen.value = !isOpen.value); return { isOpen, onClick }; }, }); </script> 

<template> <div class="popover-demo-item"> <d-popover content="content" @show="showFun()" @hide="hideFun()"> <d-button>content</d-button> </d-popover> </div> </template> <style> .popover-demo-item > * { display: inline-block; margin-right: 8px; } </style> <script setup lang="ts"> import { ref, onMounted } from 'vue'; function showFun() { this.$notificationService.open({ content: '显示后触发', }); } function hideFun() { this.$notificationService.open({ content: '隐藏后触发', }); } </script>