自学编程难不难系列 之 即时提示 ..

作者: 一了 <1liao3@funlang.org>
日期: 2021-05-22

本篇是 自学编程难不难系列 的第十六篇。

有人说, 兴趣是最好的老师, 我是深表同意, 且深有感触! 而且我还想再加一句: 行动是最好的指南!

美牛软件超极菜单设计平台有很多让人吐槽的地方, 其中一个就是图标比较丑, 很多是不能让人一眼看懂到底是干什么的, 因此按钮或各种功能上都加了提示 (tip, 也就是 H5 的 title. 这些提示大多数也是我在易用性升级的时候加上的).

但是问题在于, 浏览器在鼠标放上去几秒之后才显示提示, 非常不方便, 被吐槽了好久, 我也一直有催 (我本人不太懂前端开发), 但是一直没什么改善.

正好前段时间 z-data 出炉, 我想我可以试一下, 能不能搞定. 不试不知道, 一试吓一跳, 我居然一行代码搞定了, 极其简单!

代码放在这里, 堪称世界上最小的 z-data 组件: https://github.com/Funlang/z-tip


<div z-data @mouseover.document=$el.textContent=this&&(this.title||(this.closest('[title]')||{}).title)||''></div>


该组件可以在超极菜单设计平台上拖来拖去, 拖到哪里就在哪里显示提示, 鼠标指哪儿, 哪儿的提示就会立即显示, 所谓指哪儿打哪儿, 哪里不会点哪里, 耶~

小马过河的故事告诉我们, 任何东西水深水浅, 听人讲是没用的, 要自己去试, 去行动, 才能学得快!

我通过亲自下手写一个前端框架, 并且在一些实际场景用起来, 对前端的理解又深刻了几分.

这何尝不是一种很好的自学编程的方式呢!?