温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用Vue编写一个 loading 插件

发布时间:2020-11-10 14:41:57 来源:亿速云 阅读:259 作者:Leah 栏目:开发技术

如何利用Vue编写一个 loading 插件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

什么是vue插件

  • 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等;
  • 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件:
var myplugin = {
  install:function(Vue, options){
 ...
  }
}

从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你可以开发一个插件给别人复用。

使用插件

使用一个插件,只要像下面这样:

 Vue.use(myPlugin)

写一个loading插件

光说不练假把式,接下来写一个loading插件练练手,这个插件被封装成一个全局组件,实现下面的效果:

如何利用Vue编写一个 loading 插件

1 定义接口

我们希望应用这个插件的方式如下:

<loading text='imgss' duration='3'></loading>

其中,text用于定义loading动画显示的文字,duration定义动画时间

2 实现静态组件

新建一个loading.js文件:

 let myPlugin = {
 install: function (Vue, options) {
  Vue.component('loading', {
   props: {
    text:{
     type:String
    },
    duration:{
     type:String,
     default:'1s'//默认1s
    }
   },
   data: function() {
    return {};
   },
   template: `
    <div class='wrapper'>
     <div class='loading'>
      <span style='width:20px' v-for='char in text'>{{char}}</span>
     </div>
    </div>
   `
  });

这里模板的作用在于,将输入的字符串转换成组成字符串的字符构成的span元素;
接下来,新建一个html文件:

 <html>
 <head>
  <meta charset='utf-8'>
  <title>插件</title>
 </head>
 <body>
  <div id="app">
   <loading text='imgss'></loading>
   <loading text='我是一个粉刷匠' duration='2s'></loading>
  </div>
  <script src="http://cdn.bootcss.com/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 &#63; duration + "s" : duration , 
   animationDelay: parseInt(duration)/text.length*index +"s"
  }' 
  v-for='char,index in text'>
  {{char}}
 </span>

到这里,插件基本完成,看一下效果:

如何利用Vue编写一个 loading 插件

关于如何利用Vue编写一个 loading 插件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI