DDR爱好者之家

写一个Vue loading 插件
站长资源 2024/12/24 佚名
78 1538
DDR爱好者之家 Design By 杰米

作者：imgss

出处：http://www.cnblogs.com/imgss

什么是vue插件"htmlcode"> 

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="/UploadFiles/2021-04-02/vue.js">


这时基本上可以看到一个静态效果。


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 "s" : duration , 
   animationDelay: parseInt(duration)/text.length*index +"s"
  }' 
  v-for='char,index in text'>
  {{char}}
 </span>





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


写一个Vue loading 插件


demo


代码


codepen


以上就是写一个Vue loading 插件的详细内容，更多关于Vue 插件的资料请关注其它相关文章！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米