一个函数搞定等待提示(promise-gif v5发布,多例、任意定位)

Laravel
在插件column-relation和form-choice中(详情请看本篇的系列文章3和4),多次使用了一个前端组件。这东西小巧玲珑,用法极其方便,特此发文推荐。

效果如图所示,用法只要一个函数

例如使用axios发送get请求后想要显示一个转圈圈的动画,可以这么写:

axios.get('http://www.xxx.tt')
     .gif()        //就是这个函数 gif()
     .then(res => {
         //成功的处理
     })
     .catch(err => {
         //失败的处理
     })

也就是在promise对象后面链式调用一个 gif() 函数就完事了。就是这么简单,一个函数搞定。

如果用户瞎胡闹,故意在多个分页按钮之间依次、快速、反复的点击会怎么样?

只要axios发送了请求,就会正常显示gif动画;无论发送了多少个请求,同一时间只会显示一个gif动画(不会出现多图叠加的现象)。当所有的请求都有了结果(或成功或失败)的时候,gif动画才会最终消失。一句话总结就是:该等的时候就转圈,都完事了就隐藏。

不喜欢这动画,可否替换?

当然可以,给gif()传递参数就可以了。例如想用一个wait.gif的图片替换,并修改最终显示的宽、高,可以像下面这样写

//图片src也可以直接传递base64编码
promiseInstance.gif({width: '3rem', height: '3rem', src: 'wait.gif'})

为了调试方便,想在控制台里查一下get请求传回的结果,可以这么写

//请求成功会显示 Resolved:数据
//失败会显示 Rejected:错误信息
promiseInstance.gif({log: true})

业务逻辑分多步,可否多次调用gif动画?

可以的,在一条链上可以无限次调用,例如

axios.get('http://www.xxx.tt')
     .gif()        //首次调用
     .then(res1 => {
         //处理成功的请求,
         return axios.post();
     })
     .gif()        //再次调用
     .then(res2 => {
         //接着处理
     })

总之一句话:只要是个promise对象,就可以调用gif()开启动画;无论成败,只要有结果就关闭动画

安装或卸载

可以通过npm进行安装或卸载

//安装
npm install zhaiduting/promise-gif
//或者这样安装
npm install github:zhaiduting/promise-gif

//在app.js文件里面加载这个函数(挂载到全局Promise对象的原型链上)
Promise.prototype.gif= require('@zhaiduting/promise-gif').default;

//加载之后就可以在vue组件内部直接调用了
promiseInstance.gif().then().catch()

//卸载方法如下(有个@符号)
npm remove @zhaiduting/promise-gif

promise-gif v5 的新功能

前几个版本的gif图片都是单例图片,全局唯一、中心固定定位。在v5版本中,加了新功能(效果如下图所示)
一个函数搞定等待提示(promise-gif v3发布)

1、可以把 gif 装进任何一个盒子里面

只要传递 box 的选择器就ok了,例如装进一个 id=’sample2-box’ 的 div 里面可以像下面这样写(如果不传递 box 值就只能固定显示在浏览器的正中心,而不是盒子的正中心)

promiseInstance.gif({
    box: "#sample2-box"
})

2、可以任意对齐

只要传递水平偏移量x,或者垂直偏移量y,就可以让gif相对于中心点偏移之后再对齐(可以混合使使用长度单位及百分比,也可以使用加减乘除运算)。

//在盒内靠右对齐
//中心点横坐标+50%就是右边框,再-50px刚好右对齐(图片宽度100px)
promiseInstance.gif({
    width: "100px",
    height: "100px",
    x: "+50%-50px",
    box: "#sample2-box"
})

3、多图并存

之前的版本都是单一gif图片,v5版本里面只需要传递一个 id 即可得到一个新图片

//添加一个id=promise-gif0的图片,盒内居中显示
promiseInstance.gif({
    box: "#sample2-box",
    id: "promise-gif0"
})

//再添加一个id=promise-gif3的图片,盒内左对齐
//不指定图片大小时,默认长、宽都是30px
promiseInstance.gif({
    x: "-50%+15px",
    box: "#sample2-box",
    id: "promise-gif3"
})

不同的id对应不同的promise-gif图片,这些图片是可以同时显示的。

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
未填写
文章
63
粉丝
17
喜欢
140
收藏
118
排名:132
访问:7.4 万
私信
所有博文
社区赞助商