嘛,基于 Vue 实现的一个 tooltip 小工具,不依赖 popper.js
,支持指令注册与工具函数使用。
项目地址:https://github.com/kinglisky/vtip
文档地址: https://kinglisky.github.io/vtip
之前项目经常有碰到通过 tooltip 展示一些信息详情的需求,用了 element-ui
tool-tip
组件和 Popover
弹出窗。使用方式大概像这样的:
tooltip 组件:
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
popover 弹出窗:
<el-popover
ref="popover1"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover>
<el-button v-popover:popover1>hover 激活</el-button>
每次使用时即使是简单的 tooltip 提示也需要写挺多的东西的,而且对一个 tooltip 显示就需要生成一个 tooltip 实例,这样资源的消耗其实是很大的。
很多时候我们的 tooltip 只是显示一些文案提示,所以我个人会倾向于使用 vue 的指令,如:
<button v-tip.top="'执行操作的一些说明'">执行</button>
通过指令绑定一个需要提示的文案提示,鼠标 hover 上去以后直接在目标元素上方显示出文案的内容,不再需要像👆一样显式的写出组件实例。
当然有时候我们可能需要往 tooltip 塞一些自定义显示的内容或者是可交互内容,这时候指令也可提供一些自定义的配置:
<button v-tip="tipOptions">执行</button>
computed: {
tipOptions () {
return {
width: 'auto',
theme: 'dark',
transition: true,
// 自定组件
customComponent: Music,
// 组件 props
customProps: { id }
... 其他配置****
}
}
}
这样使用会方便很多,嘛,其实这就是 vtip
实现的功能,而且 vtip 提供的是一个单例实现,使用 vitp
时页面只有一个 tip 单例,不会为 tip 内容再创建新的实例。
小小安利一下,欢迎来踩 https://github.com/kinglisky/vtip