File size: 2,467 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<template>
<div class="popover" :class="{ 'center': center }" ref="triggerRef">
<div class="popover-content" :style="contentStyle" ref="contentRef">
<slot name="content" v-if="contentVisible"></slot>
</div>
<slot></slot>
</div>
</template>
<script lang="ts" setup>
import { type CSSProperties, onMounted, onUnmounted, ref, watch, computed } from 'vue'
import tippy, { type Instance, type Placement } from 'tippy.js'
import 'tippy.js/animations/scale.css'
const props = withDefaults(defineProps<{
value?: boolean
trigger?: 'click' | 'mouseenter' | 'manual'
placement?: Placement
appendTo?: HTMLElement | 'parent'
contentStyle?: CSSProperties
center?: boolean
offset?: number
}>(), {
value: false,
trigger: 'click',
placement: 'bottom',
center: false,
offset: 8,
})
const emit = defineEmits<{
(event: 'update:value', payload: boolean): void
(event: 'show'): void
(event: 'hide'): void
}>()
const instance = ref<Instance>()
const triggerRef = ref<HTMLElement>()
const contentRef = ref<HTMLElement>()
const contentVisible = ref(false)
const contentStyle = computed(() => {
return props.contentStyle || {}
})
watch(() => props.value, () => {
if (!instance.value) return
if (props.value) instance.value.show()
else instance.value.hide()
})
onUnmounted(() => {
if (instance.value) instance.value.destroy()
})
onMounted(() => {
instance.value = tippy(triggerRef.value!, {
content: contentRef.value!,
allowHTML: true,
trigger: props.trigger,
placement: props.placement,
interactive: true,
appendTo: props.appendTo || document.body,
maxWidth: 'none',
offset: [0, props.offset],
duration: 200,
animation: 'scale',
theme: 'popover',
onShow() {
contentVisible.value = true
},
onShown() {
if (!props.value) {
emit('update:value', true)
emit('show')
}
},
onHidden() {
if (props.value) {
emit('update:value', false)
emit('hide')
}
contentVisible.value = false
},
})
})
</script>
<style lang="scss" scoped>
.popover.center {
display: flex;
justify-content: center;
align-items: center;
}
.popover-content {
background-color: #fff;
padding: 10px;
border: 1px solid $borderColor;
box-shadow: $boxShadow;
border-radius: $borderRadius;
font-size: 13px;
}
</style>
<style lang="scss">
.tippy-box[data-theme~='popover'] {
border: 0;
outline: 0;
}
</style> |