写一个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 相关文章推荐
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
vue-dialog的弹出层组件
May 25 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python是什么 Python的用处
2020/05/26 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
开工庆典邀请函范文
2014/01/16 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
小学师德师风整改措施
2014/10/27 职场文书
怎么写工作检讨书
2014/11/16 职场文书
《学会看病》教学反思
2016/02/17 职场文书