作者：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 插件的更多相关文章

  1. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  2. 给Ionic写一个cordova(PhoneGap)插件

    给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...

  3. 如何写一个Js上传图片插件。

    项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...

  4. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  5. Skywalking-02：如何写一个Skywalking trace插件

    如何写一个Skywalking trace插件 javaagent 原理 美团技术团队-Java 动态调试技术原理及实践 类图 实现 ConsumeMessageConcurrentlyInstrum ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. 如何优雅的写一个Vue 的弹框

    写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...

  8. 改变滚动条的原始样式： chrome 可以改变， IE只能变相关颜色，firfox好像也不好改。最好是自己写一个或是用插件

    相关作者链接地址: https://www.lyblog.net/detail/314.html 问题: 1.我在项目中遇到的问题: 在设置了::-webkit-scrollbar 后,滚动条不见了! ...

  9. 面试题：你能写一个Vue的双向数据绑定吗？

    在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...

随机推荐

  1. 配置一个完整的 applicacontext.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  2. BOM浏览器对象模型下面几个比较实用的方法

    location对象 location.href-- 返回或设置当前文档的URL location.search -- 返回URL中的查询字符串部分.例如 http://www.dreamdu.com ...

  3. （转载）Sybase:bcp命令参考

    参考文档: http://blog.csdn.net/wwp1026/article/details/6900569

  4. javascript面向对象个人理解

    1. javascript面向对象特性:抽象性,封装性,继承性: 2. js中的对象:键值对的集合:比如说{key:value} 3.抽象性:用一个对象描述一个数据,需要抽取这个对象的核心数据:两个必 ...

  5. 利用Python实现一个感知机学习算法

    本文主要参考英文教材Python Machine Learning第二章.pdf文档下载链接: https://pan.baidu.com/s/1nuS07Qp 密码: gcb9. 本文主要内容包括利 ...

  6. 【.net 深呼吸】自己动手来写应用程序设置类

    在开始装逼之前,老周先说明一件事.有人说老周写的东西太简单了,能不能写点复杂点.这问题就来了,要写什么东西才叫“复杂”?最重要的是,写得太复杂了,一方面很多朋友看不懂,另一方面,连老周自己也不知道怎么 ...

  7. Linux 如何显示一个文件的某几行

    1. 从第1000行开始,显示2000行.即显示1000~2999行 cat input_file | tail -n +1000 | head -n 2000 2. 显示 1000行到3000行 c ...

  8. jenkins - jsp或其他web样式无法展示

    背景 因为jenkins安全性的问题,默认加载出来的报告是无css的,通过以下配置解决:HTML Publisher Plugin 插件在新的Jenkins版本中会导致打开的网页中无法加载CSS以及无 ...

  9. Spring AOP With AspectJ

    一.AOP和拦截器 某些情况下,AOP和拦截器包括Filter能够实现同样的功能,一般都是请求即controller层的操作,这三个执行顺序为Filter>Interceptor>AOP, ...

  10. 再起航，我的学习笔记之JavaScript设计模式02

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...