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'
}"

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

Android笔记：Eclipse中SVN插件的两种安装方式
大部分时候我们都可以通过在线的方式安装SVN插件: 在Eclipse 中,Help -> Software Updates -> Find and Install...菜单下. 在弹出对话 ...
Eclipse安装SVN插件的两种方式
登录 | 注册收藏成功确定收藏失败,请重新收藏确定查看所有私信查看所有通知暂没有新通知想要绕过微信小程序开发中的坑吗?不妨来听这个,今晚8点,1小时帮你搞定! 23小时以前 CSDN日报 ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
安装jenkins插件的两种方法
安装jenkins插件有两种方法,一种是在线安装,一种是离线安装.两种方式介绍如下: 1.如果服务器可以上网,那边选择在线安装最好不过了,安装流程为: 系统管理----插件管理---选择需要的插件直接 ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
eclipse4.6安装tomcate插件 Eclipse4.6(neno)配置Tomcat插件的两种方式
为什么80%的码农都做不了架构师?>>> Eclipse4.6(neno)配置Tomcat插件的两种方式 ,自己用的第一种手动安装 ①:下载net.sf.eclipse.tom ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
phpcms选择文件无法加载插件怎么办_win7浏览器显示无法加载插件的两种修复方法...
深度技术win7系统在使用浏览器观看视频,浏览网页的时候,显示无法加载插件,导致浏览器没办法正常使用,给操作带来一定的影响,怎么办?为什么浏览器会显示无法加载插件?针对此疑问,接下去小编给大家分享wi ...
IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装)
这篇文章主要介绍了IDEA安装阿里巴巴编码规范插件的两种方式详解(在线安装和离线安装),本文通过截图给大家展示的非常详细,需要的朋友可以参考下目录 1.在线安装: 2.离线安装: IDEA安装阿里巴 ...
音频信号输入itc服务器,音频信号的两种传输方式，你知多少？
原标题:音频信号的两种传输方式,你知多少? 前言音频信号有两种传输方式,即平衡式(XLR)与非平衡式(RCA).关于两种传输模式究竟孰优孰劣,这个问题长久以来都有争论.萝卜青菜各有所爱,今天我们就 ...

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

安装

tippy在vue项目中的引入

项目使用

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

最新文章

热门文章