时间:2021-05-25
作者:imgss
出处:http:///vue/2.4.2/vue.js"></script> <script src="./loading.js"></script> <script> Vue.use(myPlugin); var app = new Vue({ el: '#app', data: { } }); </script> </body></html>
这时基本上可以看到一个静态效果。
3 加动画
给每个元素加上一个控制上下的animation
@keyframes move { 0% { margin-top: -10px; border-bottom: 1px solid; } 50% { margin-top: 10px; border-bottom: none; } 100% { margin-top: -10px; } }除此之外,还有一下其他的公有样式代码,利用mounted生命周期函数,动态生成一个style标签,将css代码插到文档中:
mounted: function () { var cssFlag = false; return function () { if (cssFlag) { return; } var head = document.querySelector('head'); var style = document.createElement('style'); style.type = 'text/css'; style.innerText = ` .wrapper{ display: flex; justify-content: center; } .loading { display: flex; text-align: center; padding-top: 30px; height: 50px; justify-content: space-between; } .loading span { margin-top: 0; animation: ease infinite move; display: block; } @keyframes move { 0% { margin-top: -10px; border-bottom: 1px solid; } 50% { margin-top: 10px; border-bottom: none; } 100% { margin-top: -10px; } }`; head.appendChild(style); cssFlag = true; }; }(),然后通过控制span的animation-delay来模拟曲线:
<span :style='{ width: "20px", animationDuration: duration.indexOf("s") === -1 ? duration + "s" : duration , animationDelay: parseInt(duration)/text.length*index +"s" }' v-for='char,index in text'> {{char}} </span>到这里,插件基本完成,看一下效果:
demo
代码
codepen
以上就是写一个Vue loading 插件的详细内容,更多关于Vue 插件的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
dva有一个管理effects执行的hook,并基于此封装了dva-loading插件。通过这个插件,我们可以不必一遍遍地写showLoading和hideLo
最近手头有个小项目,打算用vue练个手,期间用到了vue的插件:vue-resource。下面是我使用这个插件的一些经验,算是给自己写的一个笔记,分享出来也希望
在学习之前,先问问自己,为什么要编写vue的插件。在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框。如果一个一个的引用也稍
之前写了一个WPF的圆形环绕的Loading动画,现在写一个Winform的圆形环绕的Loading动画。1.新建Winform项目,添加一个pictureBo
我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度。测试页面:Page.vue模板页面:WaterFollow.vue和WFColumn.vu