写一个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显示隐藏层比较不错的方法分析
Sep 30 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
Javascript事件实例详解
Nov 06 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
nodejs教程之入门
2014/11/21 NodeJs
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JS前端笔试题分析
2016/12/19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
详解JS预解析原理
2020/06/16 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
打包发布Python模块的方法详解
2016/09/18 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
零基础小白多久能学会python
2020/06/22 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
2014小学语文教学工作总结
2014/12/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
会议欢迎词范文
2015/01/27 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python