写一个Vue loading 插件
作者：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插件练练手，这个插件被封装成一个全局组件，实现下面的效果:
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>
到这里，插件基本完成,看一下效果:
demo
写一个Vue loading 插件的更多相关文章
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- 给Ionic写一个cordova(PhoneGap)插件
给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...
- 如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
- Skywalking-02：如何写一个Skywalking trace插件
如何写一个Skywalking trace插件 javaagent 原理 美团技术团队-Java 动态调试技术原理及实践 类图 实现 ConsumeMessageConcurrentlyInstrum ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
- 改变滚动条的原始样式： chrome 可以改变， IE只能变相关颜色，firfox好像也不好改。最好是自己写一个或是用插件
相关作者链接地址: https://www.lyblog.net/detail/314.html 问题: 1.我在项目中遇到的问题: 在设置了::-webkit-scrollbar 后,滚动条不见了! ...
- 面试题：你能写一个Vue的双向数据绑定吗？
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
随机推荐
- Java总结之线程（1）
java线程是很重要的一项,所以作为java程序员必须要掌握的. 理解java线程必须先理解线程在java中的生命周期.. 1.java线程生命周期 1.new 创建一个线程 java中创建线程有 ...
- ionic项目结构解析
ionic项目结构解析 原始结构 创建一个IonicDemo项目 'ionic start IonicDemo sidemenu' 这种结构多模块开发比较麻烦,因为view跟controller分开路 ...
- mybatis学习笔记(一）-- 简单入门（附测试Demo详细过程）
写在最前 MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以对配置和原生M ...
- Android服务端的设计
1.创建自己的MyServletContextListener.java: package yybwb; import java.net.ServerSocket; import javax.serv ...
- Java缓存框架使用EhCache结合Spring AOP
一.Ehcache简介 EhCache是一个纯Java的进程内缓存框架,具有如下特点: 1. 快速简单,非常容易和应用集成. 2.支持多种缓存策略 . 3. 缓存数据有 ...
- 1，入门-Hello Soring Boot
什么是SpringBoot Spring Boot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目.大多数SpringBoot项目只需要很少的配置文件. SpringBoo ...
- Java 日志框架终极教程
概述 对于现代的 Java 应用程序来说,只要被部署到真实的生产环境,其日志的重要性就是不言而喻的,很难想象没有任何日志记录功能的应用程序被运行于生产环境中.日志 API 所能提供的功能是多种多样的, ...
- 我眼中的ASP.NET Core之微服务 (二)
前言 接上一篇. 上一篇未完待续的原因是当时刚好是6-30号晚上马上12点了还没写完,然后我想赶在7月1号之前发出去,所以当时就发了.然后在发的时候出了一点问题,结果发出去的时候刚好是 7.1号 00 ...
- redhat6.4配置yum
redhat6.4配置本地yum 1. 挂载(我喜欢放在/mnt下面) mount -t auto *** /mnt/redhat 或 cp *** /mnt/redhat ...
- Ubuntu14.04桌面系统允许root登录
首先安装完系统后,在登录界面我们可以看到不允许root账户登录.以普通账户登录系统,打开终端.执行如下命令来设置root密码: sudo passwd root 然后执行命令修改如下配置文件: vi ...