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加载效果)的更多相关文章

  1. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  2. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...

  3. Vuejs自定义全局组件--loading

    不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与“加载中……”打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一个组件都新建一个新的 ...

  4. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  5. 页面加载完成前的loading加载效果

    /*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...

  6. coding++ :局部 Loading 加载效果

    $("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/ ...

  7. 使用Dialog实现全局Loading加载框

    Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...

  8. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  9. vue2组件懒加载浅析

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

随机推荐

  1. windows下libcurl+openssl编译与使用配置

    之前使用过libcurl, 编译也是最简单的版本, 不需要openssl, 即不需要支持https, 所以编译和使用都很正常. 但要使用openssl就很麻烦了, 我花了差不多两天去编译和调用, 记录 ...

  2. js中的encodeURIComponent()函数

    encodeURIComponent() 函数可把字符串作为 URI 组件进行编码. $scope.linktotheme = function () { if ($scope.curthemeid ...

  3. 微信小程序开发踩坑记录

    1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...

  4. (转载)C#获取当前应用程序所在路径及环境变量

    一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...

  5. js数组与字符串相互转换

    一.数组转字符串(将数组元素用某个字符连接成字符串) var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); 二.字符串转数组(将字符 ...

  6. 前端路由vue-router介绍

    一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...

  7. dataBinding与ListView及事件

    2015年Google IO大会分布了DataBinding库,能够更快捷便利的实现MVVM结构模式.但是,通过对DataBinding的学习,其中踩过得坑,今天要在这里记录一下.对于DataBind ...

  8. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  9. CSS和文档流

    1.  CSS的定位机制有3种:普通流.浮动和定位. 2.  文档流:从上到下,从左到右,一个挨一个的简单或者叫正常布局. 3.  定位:(position) Static:保持文档流. Relati ...

  10. 【量产工具修复】U盘插上没反应,格式化提示有写保护

    最近在实验室发现师兄留下的U盘,插上电脑后打不开,弹出格式化界面,格式化的时候又提示该u盘“被写保护无法格式化”,于是打算采用量产的方法. 第一步:使用chipgenius监测u盘的芯片制造商和型号 ...