vue2 自定义全局组件(Loading加载效果)
vue2 自定义全局组件(Loading加载效果)
github地址: https://github.com/ccyinghua/custom-global-component
一、构建项目
vue init webpack-simple custom-global-component
cnpm install
npm run dev
1、自定义vue组件,首先要创建组件文件,在loading文件夹中Loading.vue直接按照vue template相关规则写即可

2、创建Loading.vue组件之后,要建立相关的js调用这个Loading.vue,进行相关配置后导出使用。index.js中中间部分配置最为重要,
主要文件index.js代码:
import LoadingComponent from './Loading.vue'
const Loading={
install: function(Vue){
Vue.component('Loading',LoadingComponent)
}
}
export default Loading
说明:Vue.component('Loading',LoadingComponent);中的'Loading',
这个命名就是在其他文件中调用这个组件的名字,例如调用这个loading可以写成<Loading></Loading>

3、使用这个组件


vue2 自定义全局组件(Loading加载效果)的更多相关文章
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...
- 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
- 页面加载完成前的loading加载效果
/*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...
- coding++ :局部 Loading 加载效果
$("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/ ...
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- vue2组件懒加载浅析
vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...
随机推荐
- nyoj 364——田忌赛马——————【贪心】
田忌赛马 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 Here is a famous story in Chinese history. "That ...
- nyoj 1197——你会加吗?——————【快速幂、分治】
你会加吗? 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给出两个整数A和N,计算(A + A^2 + A^3 + …… + A^(N - 1) + A^N)% 6 ...
- 吴恩达《Machine Learning Yearning》总结(11-20章)
11.何时修改开发集.测试集和度量指标 开展一个新项目,尽快选好开发集和测试集:例子,根据度量指标A分类器排在B分类器前面,但是团队认为B分类器在实际产品上优于A分类器,这时就需要考虑修改开发集和测试 ...
- 深入理解JavaScript系列(14):作用域链(Scope Chain)
前言 在第12章关于变量对象的描述中,我们已经知道一个执行上下文 的数据(变量.函数声明和函数的形参)作为属性存储在变量对象中. 同时我们也知道变量对象在每次进入上下文时创建,并填入初始值,值的更新出 ...
- 循环结构 while
while 循环语句可以根据某些条件重复执行一条t-sql 语句或一个语句块 语法: while (条件) begin 语句或语句块 end 程序调试 alt+f5 启动调试 f9 切换断点 f10 ...
- JVM crash at ForUtil.readBlock
今天同学让帮忙看下JVM错误日志,才发现已经开始接触java3个月,还没看到相关错误日志.平时看的都只是程序运行时写入的日志,关于JVM的错误日志还真没看过.网上收集资料,整理如下. 一.日志文件: ...
- vue+axios+easy-mock+element-ui实现表格分页功能
废话不多,效果如图: LineSource.vue文件内代码如下: <template> <div class="c-main auth userControl" ...
- Java设计模式—门面模式(带案例分析)
1.门面模式的定义: 门面模式(Facade Pattern)也叫做外观模式,是一种比较常用的封装模式,其定义如下: 要求一个子系统的外部与其内部的通信必须通过一个统一的对象进行.门面模式 ...
- Revolution of Unix
- Linux漏洞分析入门笔记-CVE_2018_6323_整型溢出
操作系统 Ubuntu 16.04 /32 位 调试器 IDA pro 7.0 漏洞软件 binutils-2.29.1 0x00: 漏洞描述 1.什么是整数溢出: 在计算机中,整数分 ...