写一个Vue loading 插件

时间: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邮箱联系删除。

相关文章