基于 Vue 实现的 tooltip 工具

阅读 633
收藏 30
2017-10-31
原文链接:cnodejs.org

嘛,基于 Vue 实现的一个 tooltip 小工具,不依赖 popper.js,支持指令注册与工具函数使用。

项目地址:github.com/kinglisky/v…

文档地址: kinglisky.github.io/vtip

屏幕快照 2017-10-31 下午12.27.32.png

屏幕快照 2017-10-31 下午12.27.19.png

之前项目经常有碰到通过 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 内容再创建新的实例。

小小安利一下,欢迎来踩 github.com/kinglisky/v…

评论