You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.2 KiB
98 lines
2.2 KiB
7 months ago
|
<template>
|
||
|
|
<div class="c-tooltip">
|
||
|
|
<div class="c-tooltip-content" @mouseover="showTips" @mouseleave="closeTips">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
<div class="c-tooltip-tip" :class="placement" v-if="tipsShow" :style='tipsStyle'>
|
||
|
|
<p v-for="info in infos" class="info">* {{ info }}</p>
|
||
|
|
<slot name="tip"></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { reactive, onMounted, ref } from "vue";
|
||
|
|
import { useI18n } from "vue3-i18n";
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { state, commit, dispatch } = useStore();
|
||
|
|
const tipsShow = ref(false);
|
||
|
|
const tipsStyle = ref({});
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
placement: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
infos: {
|
||
|
|
type: Array,
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: '16rem'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const showTips = (e) => {
|
||
|
|
const x = e.pageX, y = e.pageY, maxH = window.innerHeight, maxW = window.innerWidth;
|
||
|
|
const xt = x < 100 ? '15%' : y < maxH - 100 ? '0%' : '-40%';
|
||
|
|
const yt = y < maxH - 200 ? '100%' : '-50%';
|
||
|
|
tipsStyle.value = {
|
||
|
|
transform: 'translate(' + xt + ', ' + yt + ')'
|
||
|
|
}
|
||
|
|
tipsShow.value = true
|
||
|
|
}
|
||
|
|
const closeTips = () => {
|
||
|
|
tipsShow.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => { });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.c-tooltip,
|
||
|
|
.c-tooltip-content {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.c-tooltip-tip {
|
||
|
|
bottom: -.4rem;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(0%, 100%);
|
||
|
|
min-width: v-bind('width');
|
||
|
|
border: 1px solid #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 1.2rem;
|
||
|
|
background: #111111;
|
||
|
|
padding-top: 3.6rem;
|
||
|
|
font-size: 0.86rem;
|
||
|
|
font-weight: normal;
|
||
|
|
z-index: 9999;
|
||
|
|
box-shadow: 0 0 3px 3px rgba($color: #000000, $alpha: 1.0);
|
||
|
|
|
||
|
|
.info {
|
||
|
|
font-weight: normal;
|
||
|
|
margin-top: 0.4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
top: 0.4rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
width: 3.2rem;
|
||
|
|
height: 3.2rem;
|
||
|
|
background-image: url(@/assets/icons/tips.png);
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.top {
|
||
|
|
top: -2rem;
|
||
|
|
transform: translate(-50%, -100%);
|
||
|
|
bottom: initial;
|
||
|
|
}
|
||
|
|
</style>
|