Li RUONAN


一枚行走在前端道路上的程序媛 ~~


tipBox

前两天开发新页面,有个点赞功能要实现,需求本身并不难,但是自己想做出个效果出来,至少让用户知道,我点赞成功了嘛

后来,根据页面的设计和布局,最终选择了【 点赞+1 】这个动画效果

查询了一部分资料,基本都是基于jQuery实现的。以下是 我为了适应 Vue框架,对jg封装的方法做了修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import * as $ from 'jquery'
export default function tipsBox (node, options = {}) {
const obj = $(node) // 将从refs获取的dom对象换成jq对象
options = $.extend({
obj: obj || null, // jq对象,要在那个html标签上显示
str: '+1', // 字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
startSize: '12px', // 动画开始的文字大小
endSize: '20px', // 动画结束的文字大小
interval: 600, // 动画时间间隔
color: '#EE0000', // 文字颜色
weight: 'bold', // 文字
callback: function () {} // 回调函数
}, options)
$('body').append(`<span class='num'>${options.str}</span>`)
const box = $('.num')
let left = options.obj.offset().left + options.obj.width() / 2
let top = options.obj.offset().top - options.obj.height()
box.css({
'position': 'absolute',
'left': left + 10 + 'px',
'top': top - 10 + 'px',
'z-index': 9999,
'font-size': options.startSize,
'line-height': options.endSize,
'color': options.color,
'font-weight': options.weight
})
box.animate({
'font-size': options.endSize,
'opacity': '0',
'top': top - parseInt(options.endSize) + 'px'
}, options.interval, () => {
box.remove()
options.callback()
})
}

以上,只要在需要click的方法下,调用该函数,并传入该节点即可。

当然,为了一个小功能安装这么大的一个库,显然不划算。紧急开发时期勉强可用,但并不是长久之计,当然是自己封装该方法。

【GitHub】https://github.com/Sai0514/tipBox.git