写一个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 相关文章推荐
replace()方法查找字符使用示例
Oct 28 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
微信小程序实现星级评分和展示
Jul 05 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 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
3
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python生成任意频率正弦波方式
2020/02/25 Python
Shell如何接收变量输入
2012/09/24 面试题
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
公路施工安全责任书
2015/05/08 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
MySQL创建索引需要了解的
2021/04/08 MySQL
yolov5返回坐标的方法实例
2022/03/17 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python