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. (二) 修改IDEA自带的 maven 仓库

    详细可见教程 :https://www.yiibai.com/testng/ 1.新建一个maven项目 Maven简介: Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生 ...

  2. 深入理解JavaScript系列(28):设计模式之工厂模式

    介绍 与创建型模式类似,工厂模式创建对象(视为工厂里的产品)时无需指定创建对象的具体类. 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子 ...

  3. 2、弹出窗口 Alert

    1.只是弹出框 /* --- page1.html ---*/ <ion-navbar *navbar> <ion-title>Tab 1</ion-title> ...

  4. 当Activity出现Exception时是如何处理的?

    1.ActivityThread 2.PerformStop 在这里会调用mWindow.closeAllPanels(),从而关闭OptionMenu, ContextMenu.如果自己通过Wind ...

  5. 通过学生-课程关系表,熟悉hive语句

    通过学生-课程关系表,熟悉hive语句 1.在hive中创建以下三个表. create table  student(Sno int,Sname string,Sex string,Sage int, ...

  6. 《Unity Shader入门精要》读书笔记(1)

    主要是对第二章的整理 渲染流水线:由一个三维场景出发,生成(渲染)一张二维图像. 渲染流程:应用阶段.几何阶段.光栅化阶段. 应用阶段: 1. 把数据加载到显存中 渲染所需数据从硬盘,到内存,再到显存 ...

  7. 深入理解读写锁—ReadWriteLock源码分析

    转载:https://blog.csdn.net/qq_19431333/article/details/70568478 ReadWriteLock管理一组锁,一个是只读的锁,一个是写锁.读锁可以在 ...

  8. webpack起步

    为什么要使用webpack 很牛逼的样子 https://www.webpackjs.com/comparison/ 基本概念 1. 入口(entry) module.exports = { entr ...

  9. scss-#{}插值

    一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用. 例如:scss代码 $borderDirection: top !d ...

  10. vue 上拉加载更多

    var _this=this; var goods_id = _this.$route.query.id; var isscroll = true; _this.$nextTick(() => ...