写一个Vue loading 插件


Posted in Javascript onNovember 09, 2020

作者: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插件练练手,这个插件被封装成一个全局组件,实现下面的效果:

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

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

写一个Vue loading 插件

demo

代码

codepen

以上就是写一个Vue loading 插件的详细内容,更多关于Vue 插件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 #Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 #Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 #Javascript
Webpack的Loader和Plugin的区别
Nov 09 #Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 #Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 #Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 #Javascript
You might like
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
用javascript操作xml
2006/11/04 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
用python实现对比两张图片的不同
2018/02/05 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
大学活动策划书范文
2014/01/10 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
大学四年个人总结
2015/03/03 职场文书
单位综合评价意见
2015/06/05 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python