脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 插件

写一个Vue loading 插件

 更新时间：2020年11月09日 14:46:16   作者：nobody-junior  
这篇文章主要介绍了如何写一个Vue loading 插件，帮助大家更好的理解和学习vue 插件的相关知识，感兴趣的朋友可以了解下

作者：imgss

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

什么是vue插件?

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

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

使用插件

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

 Vue.use(myPlugin)

写一个loading插件

光说不练假把式，接下来写一个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 ? duration + "s" : duration , 
   animationDelay: parseInt(duration)/text.length*index +"s"
  }' 
  v-for='char,index in text'>
  {{char}}
 </span>

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

demo

代码

codepen

以上就是写一个Vue loading 插件的详细内容，更多关于Vue 插件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Vue.js第二天学习笔记（vue-router）

    Vue.js第二天学习笔记（vue-router）

    这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记，关于vue-router的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 使用Vue.js实现数据的双向绑定

    使用Vue.js实现数据的双向绑定

    在Vue.js中，双向数据绑定是一项非常强大的功能，它能够使数据和视图之间保持同步，让开发者更加方便地操作数据，在本文中，我们将介绍如何用Vue.js实现数据的双向绑定,需要的朋友可以参考下
    2023-04-04
  • vue3循环设置ref并获取的解决方案

    vue3循环设置ref并获取的解决方案

    我们在平时做业务的时候,父子组件通信会经常用到ref,这篇文章主要给大家介绍了关于vue3循环设置ref并获取的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • vue3封装轮播图组件的方法

    vue3封装轮播图组件的方法

    这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue3常用的指令之v-bind和v-on指令用法

    vue3常用的指令之v-bind和v-on指令用法

    vue的v-on与v-bind,v-on就是用于绑定事件的,下面这篇文章主要给大家介绍了关于vue3常用的指令之v-bind和v-on指令用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue中动态class的多种写法

    Vue中动态class的多种写法

    这篇文章主要介绍了Vue之动态class的几种写法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • vue中集成省市区街四级地址组件的实现过程

    vue中集成省市区街四级地址组件的实现过程

    我们在开发中常会遇到选择地址的需求,有时候只需要选择省就可以,有时候则需要选择到市、县,以至于乡镇，甚至哪个村都有可能,下面这篇文章主要给大家介绍了关于vue中集成省市区街四级地址组件的相关资料,需要的朋友可以参考下
    2022-12-12
  • 深入浅析vue中cross-env的使用

    深入浅析vue中cross-env的使用

    cross-env是跨平台设置和使用环境变量的脚本。这篇文章主要介绍了vue中cross-env的使用,需要的朋友可以参考下
    2019-09-09
  • Vue或者React项目配置@路径别名及智能提示方案

    Vue或者React项目配置@路径别名及智能提示方案

    这篇文章主要介绍了Vue或者React项目配置@路径别名及智能提示方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 踩不完的异步之坑及解决

    vue 踩不完的异步之坑及解决

    这篇文章主要介绍了vue 踩不完的异步之坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05

最新评论