vue-tippy优秀悬浮框插件的两种使用方式（解决elementui的tooltip不及时消失及定位出错问题，使用el-progress进度条模仿柱状图,tippy模仿echarts悬浮框）

tippy.js是一个优秀的悬浮框插件，官方通道点击tippyjs，当我们使用elementui中的悬浮框时经常会出现悬浮框消失不及时影响操作或者悬浮框错位的情况，tippy就很好地解决了这个问题，下面废话不多说，开始介绍使用方法。

安装

npm:
npm install --save vue-tippy
yarn:
yarn add vue-tippy

tippy在vue项目中的引入

在main.js中引入

import VueTippy from 'vue-tippy'
Vue.use(VueTippy)

避免xss

Vue.use(VueTippy,{
arrow:true,
ignoreAttributes:true,
allowHTML:false
})

项目使用

实例——使用el-progress进度条模仿柱状图，tippy模仿echarts悬浮框

使用方法一 ——命令

<el-progress
v-tippy="{
content:`<p>名称：${name}</p><p>数量：${num}个</p>`,
allowHTML:true,
theme:'bar-echarts'
}"
:stroke-width="8"
:percentage="parseInt((num/total)*100)||0"
:show-text="false"
/>

bar-echarts样式

.bar-echarts-theme{
text-align:left;
background:#fff6f4 !important;
border:1px solid #f17764;
color:#f17764;
font-size:13px !important;
transfrom-style:preserve-3d;
(隐藏箭头)
&[x-placement^='top']::before{
content:'';
position:absolute;
width:0;
height:0;
}
&[x-placement^='top'].tippy-arrow{
display:none
}
&[x-placement^='bottom'].tippy-arrow{
border:none;
}
.tippy-roundarrow{
fill:#fef0f0;
svg{
display:none;
}
}
}

使用方法二——组件

首先在组件中引入
import {TippyComponent} from 'vue-tippy'
使用(样式同上)
<tippy-component theme="bar-echarts">
<template #trigger>
<el-progress
:stroke-width="8"
:percentage="parseInt((num/total)*100)||0"
:show-text="false"
/>
</template>
<p>名称：{{name}}</p>
<p>数量：{{num}}个</p>
</tippy-component>

补充：可以通过一些条件限制悬浮框出现条件或者方式，例如下面

v-tippy="{
content:tag,
trigger:tag&&tag.length>10?'mouseenter':'click'
}"