作者：imgss 出处：http://www.cnblogs.com/imgss 欢迎转载，也请保留这段声明。谢谢!

什么是vue插件?

  • 从功能上说，插件是为Vue添加全局功能的一种机制，比如给Vue添加一个全局组件，全局指令等；

  • 从代码结构上说，插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数，还可以接收一个可选的参数，用于配置插件：

    1. var myplugin = {
    2.    install:function(Vue, options){
    3.   ...
    4.    }
    5. }

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

使用插件

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

  1.   Vue.use(myPlugin)

写一个loading插件

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

1定义接口

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

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

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

2实现静态组件

新建一个loading.js文件：

  1.   let myPlugin = {
  2.   install: function (Vue, options) {
  3.     Vue.component('loading', {
  4.       props: {
  5.         text:{
  6.           type:String
  7.         },
  8.         duration:{
  9.           type:String,
  10.           default:'1s'//默认1s
  11.         }
  12.       },
  13.       data: function() {
  14.         return {};
  15.       },
  16.       template: `
  17.         <div class='wrapper'>
  18.           <div class='loading'>
  19.             <span style='width:20px' v-for='char in text'>{{char}}</span>
  20.           </div>
  21.         </div>
  22.       `
  23.     });

这里模板的作用在于，将输入的字符串转换成组成字符串的字符构成的span元素；

接下来，新建一个html文件：

  1.   <html>
  2.   <head>
  3.     <meta charset='utf-8'>
  4.     <title>插件</title>
  5.   </head>
  6.   <body>
  7.     <div id="app">
  8.       <loading text='imgss'></loading>
  9.       <loading text='我是一个粉刷匠' duration='2s'></loading>
  10.     </div>
  11.     <script src="http://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  12.     <script src="./loading.js"></script>
  13.     <script>
  14.       Vue.use(myPlugin);
  15.       var app = new Vue({
  16.         el: '#app',
  17.         data: {
  18.         }
  19.       });
  20.     </script>
  22.   </body>
  23. </html>

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

3加动画

给每个元素加上一个控制上下的animation

  1.   @keyframes move {
  2.     0% {
  3.       margin-top: -10px;
  4.       border-bottom: 1px solid;
  5.     }
  6.     50% {
  7.       margin-top: 10px;
  8.       border-bottom: none;
  9.     }
  10.     100% {
  11.       margin-top: -10px;
  12.     }
  13.   }

除此之外，还有一下其他的公有样式代码，利用mounted生命周期函数，动态生成一个style标签，将css代码插到文档中:

  1.       mounted: function () {
  2.         var cssFlag = false;
  3.         return function () {
  4.           if (cssFlag) {
  5.             return;
  6.           }
  7.           var head = document.querySelector('head');
  8.           var style = document.createElement('style');
  9.           style.type = 'text/css';
  10.           style.innerText = `
  11.           .wrapper{
  12.             display: flex;
  13.             justify-content: center;
  14.           }
  15.           .loading {
  16.             display: flex;
  17.             text-align: center;
  18.             padding-top: 30px;
  19.             height: 50px;
  20.             justify-content: space-between;
  21.           }
  22.           .loading span {
  23.             margin-top: 0;
  24.             animation: ease infinite move;
  25.             display: block;
  26.           }
  28.           @keyframes move {
  29.             0% {
  30.               margin-top: -10px;
  31.               border-bottom: 1px solid;
  32.             }
  33.             50% {
  34.               margin-top: 10px;
  35.               border-bottom: none;
  36.             }
  37.             100% {
  38.               margin-top: -10px;
  39.             }
  40.           }`;
  41.           head.appendChild(style);
  42.           cssFlag = true;
  43.         };
  44.       }(),

然后通过控制span的animation-delay来模拟曲线:

  1. <span
  2.     :style='{
  3.       width: "20px",
  4.       animationDuration: duration.indexOf("s") === -1 ? duration + "s" : duration ,
  5.       animationDelay: parseInt(duration)/text.length*index +"s"
  6.     }'
  7.     v-for='char,index in text'>
  8.     {{char}}
  9.   </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. Python将数据插入到数据库时遇到单引号插入错误的问题

    这才是真正的解决方法,真不知道有些人连试都没试过就乱转载 比如你要插入一个字符串,是一个变量 如:str = "I'am a handsom boy" 由于这个字符串包含',插入数 ...

  2. 关闭chrome浏览器的developer tools

    背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shift+C等都会启动developer tools.对于不开发Web的人来说, ...

  3. css3学习系列之移动（一）

    transform功能 放缩 使用sacle方法实现文字或图像的放缩处理,在参数中指定缩放倍率,比如sacle(0.5)表示缩小50%,例子如下: <!DOCTYPE html> < ...

  4. Dagger2在Android开发中的应用

    世界是普遍联系的,任何事物和个体都直接或间接相互依赖,在时空长河中共同发展.在面向对象的世界中,更是如此,类与类之间的依赖,关联关系,模块(亦或是分层架构中的层)之间的耦合关系,都是我们在软件开发实践 ...

  5. Mybatis(七) mybatis的逆向工程的配置详解

    还是觉得看书学习有意思~嘿嘿.今天把mybatis给结束掉. --WH 一.什么是逆向工程? 简单点说,就是通过数据库中的单表,自动生成java代码. Mybatis官方提供了逆向工程,可以针对单表自 ...

  6. 关于STM32单片机的IAP实现

    基于STM32F103单片机的IAP实现(虽然该篇文章不会详细写出实现细节,但是会从一个全局的角度讲述,实际的实现细节只需根据datasheet即可完成). 一.基础概念 什么是IAP?IAP即在应用 ...

  7. string can not be resolved

    参考:http://jingyan.baidu.com/article/a17d5285339c828099c8f245.html

  8. 有关Android插件化思考

    最近几年移动开发业界兴起了「 插件化技术 」的旋风,各个大厂都推出了自己的插件化框架,各种开源框架都评价自身功能优越性,令人目不暇接.随着公司业务快速发展,项目增多,开发资源却有限,如何能在有限资源内 ...

  9. xdu_1009: Josephus环的复仇（线段树）

    题目链接 题意不难理解,解法具体看代码及注释吧.. #include<bits/stdc++.h> using namespace std; typedef long long LL; ; ...

  10. 玲珑杯 Round #11 （1001 1004 1007）

    比赛链接 直接贴代码.. #include<bits/stdc++.h> using namespace std; typedef long long LL; int main() { L ...