vue2 loading插件

2026-09-05

vue2.0插件--loading

loading效果很常见,常见到我们任何一个项目中,都可以见到他的身影.今天就以loading作为切入口,唠叨一下vuejs的插件的写法. 看vuejs官方文档关于插件的说明,关于使用插件和写插件,Vue插件基本上都躲不开以下几种方案: 添加全局方法或者属性,如: vue-custom-element 添加全局资源:指令/过滤器/过渡等,如 vue-touch 通过全局 mixin 方法添加一些组件选项,如: vue-router 添加 Vue 实例方法,通过把它们添加到 Vue.prototy

loading插件（原创）

前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chengguanhui.com/demos/loading-js/ 1.简介 loading.js是本人近日开发的一款小插件,它主要是用于对图片进行预加载和展示多达28种的CSS3加载特效,非常小巧方便.这28个特效是网上收集回来的,为了在做小游戏或者写页面的时候使用更方便,我就把它做成了JS版本了.想要引入效

写一个Vue loading 插件

什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

【自己开发】Jquery的loading插件

经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jquery-1.10.2.js,建议用高版本. <script src="jquery-1.10.2.js"></script> 然后引入样式和js文件,Loading.css和Loading.js <link rel="stylesheet"

#Plugin 环形loading插件

CircleLoader 环形loading插件 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 案例展示下载地址 https://github.com/chaorenzeng/CircleLoader/archive/master.zip 快速使用 1.引用 CircleLoader.js CircleLoader.css 2.参考以下HTML结构文档 <!DOCTYPE html> <html> <head> <meta

JQuery+Bootstrap 自定义全屏Loading插件

/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上.Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Loading(config) { if (this instanc

自定义vue的loading插件

在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中,如下图: 这种是我们比较常用的一种方法,它的好处就是让我们比较直观地对组件进行调用, 方便地通过标签上的属性动态地传给该组件,或者去获取子组件emit出来的事件.而我们也比较容易理解该组件在当前父组件中的运作情况. 如果该组件只是属于某个组件页面中的而已,这种方法确实可以省去编程中的一些不必要的耦合

Vue2自定义插件的写法-Vue.use()

最近在用vue2完善一个项目,顺便温习下vue2的基础知识点! 有些知识点恰好没用到时间一长就会淡忘,这样对自己是一种损失. 定义一个对象对象里可以有任何内容但install的函数是必不可少的,因为 use方法会去调用target.install(); 值得一提的是这里调用install的时候会向这个函数传入Vue实例(刚出生的时候,或者叫 beforeCreate钩子时期的实例),这就给了我们很多的操作空间! 我们知道不管是搞全局事件总线还是怎样都是往Vue原型上挂方法,这里就可以利用它来

vue2.0插件

1.better-scroll 参考网址:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/ better-scroll 是什么 firstClick和better-scroll冲突的时候将needsclick绑定在div1,即实际点击的元素上. better-scroll 是一款重点解决移动端(未来可能会考虑 PC 端)各种滚动场景需求的插件.它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在

基于weui loading插件封装

<template> <div id="loadingToast" v-if="show"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-loading weui-icon_toa

vue3.x全局$toast、$message、$loading等js插件

有时候我们需要使用一些类似toast,messge.loading这些跟js交互很频繁的插件,vue3.x这类插件的定义跟vue2.x插件稍大,而且相对变得复杂了一点点. 第一种.需要时创建,用完移除这种做法相对损耗性能,当一些显示隐藏频率不是特别高的插件可以如此封装. 1.新建loading.vue文件 <template> <div class="loading"> 加载中... </div> </template> <scr

vue2-loading-bar 一款基于Vue2的进度条插件

自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手.基于对音乐的热爱,选择的第一个demo是音乐播放器.一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这是官方demo. 首先是安装(我使用就是脚手架安装): npm install vue2-loading-bar 当然,你也可以用外链的方式引入. 然后是引入以及使用: <template> <div class="footer"> <div class=&q

vue axios拦截器 + 自编写插件实现全局 loading 效果；

项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面直接贴上代码~ 在公用模块定义loading文件,含 index.js,loading.vue文件,文件结构如下: 注:loading.vue 与 index.js 之间的传值通过props实现,代码如下: loading.vue <template> <div class="lo

插件-监控页面加载之loading

查看效果点https://icedjuice.github.io/plug-in/loading/loading.html 简单易用的loading插件,该插件并不是真正的监控页面的资源加载过程,而是通过模仿监控加载实现效果,简单易用且基本不消耗性能,十分方便. 1. html <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="

vue插件编写与实战

关于微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客知乎专栏:前端呼啦圈前言热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue开源插件,而这些插件大都来自第三方开发者们,是他们为vue社区提供了大量的技术支持和解决方案.本文立足vue开源的理念,主要为vue开发者讲解编写vue插件的方法和步骤,通过理论与实践相结合的方式来加深大家对vue插件编写的认识. vue插件介绍 1. 插件与组件在讲解插件之前,我们首先来了解下v

自己动手编写vue插件

一.为什么要自己动手写插件呢,原因有二: 其一:是因为最近产品了提了一个在web端接收,消息通知的需求,产品要求在若干个页面内如果有消息,就要弹出消息弹窗展示给用户,略加思索之后,第一反应就是写个消息的组件,在需要的页面引入,不过写好之后,发现这样写好麻烦,是不是可以写个插件在全局一次性引入呢? 其二:纯粹的想学习一下vue的插件是如何开发的二.既然有想法了,那就开始写呗,先去查看了vue的官方文档,官方文档介绍如下: 插件通常用于为 Vue 添加全局级别的功能.然而对于插件,并没有严格限定其

vue-cli#2.0 webpack 配置分析

目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └

Knockout Mvc Compoment FrameSet

Knockout Mvc Compoment FrameSet 框架文件结构 01- 网站(表现层),mvc主要作用视图展示. 02- 模型(Model),主要作用承载视图数据结构,网站前后台数据交互模型. 03- 业务(Business),业务逻辑层(含Ibusiness),视图接口定义,从服务过来的Dto通过Business转换成Model. 04- 单元测试(test),Controller中方法的单元测试. 1.网站文件结构 App_Data App_Start 应用程序

详解 vue-cli 的打包配置文件代码（给大家写写注释）

一.前言对于webpack基础不好,node指令不通的童鞋.估计对自己搭建Vue.react脚手架是相当头疼的,有种无从下手的感觉.然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白.那大多数人就采取折中的方案,修改成熟的脚手架,改成自己想要的样子.这个相对来说难度降低了不少,不过依然会有很多难点不加不明白.所以这里就以Vue的脚手架为例子,将源码加上注释,方便大家加深对项目配置的理解,少走弯路. 二.vue-cli 都做了什么先跟大家简单说说,vue-cli 都做了什么,大

在普通js文件里引入vue实例的方法

首先是我是写了一个 Loading 插件然后是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想在封装的axios的http.js文件里使用这个插件.所以我得想办法把vue实例引进来. 经过测试可以如下这样.(好吧上面,都是废话) 图中代码: import Vue from 'vue'; //引入vue //必须实例化 Vue let vm = new Vue(); /*这里有个点需要注意,直

vue2 loading插件

热门专题