作者：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 插件的资料请关注其它相关文章！