在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件。

一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中,如下图:

这种是我们比较常用的一种方法,它的好处就是让我们比较直观地对组件进行调用, 方便地通过标签上的属性动态地传给该组件,或者去获取子组件emit出来的事件。而我们也比较容易理解该组件在当前父组件中的运作情况。

如果该组件只是属于某个组件页面中的而已,这种方法确实可以省去编程中的一些不必要的耦合,提升代码质量以及可读性。但是,如果像我一开头说的Loading或者Alert这种可能到处都会出现的组件来说,这种引用(import)方法就会造成不必要的重复代码出现,所以对于这种组件,我们要将其改造,使之引用一次,到处就都可以随意使用的插件!

好吧,官方文档说得这么简单,连个简单的例子都不给!但是这里面说到了一些重点,首先我们在这个插件里面,要有一个公开的方法install,它接受两个参数,一个是Vue构造器,第二个是可选的参数对象(也就是我们自定义的一些参数,比如主题啊什么的)。然后编写插件有四种方法将其“绑定”到Vue上面,这里我只用到了上图中第3点和第4点。

接下来我们来封装一下该组件,我的代码如下:

.

自定义vue的loading插件的更多相关文章

  1. JQuery+Bootstrap 自定义全屏Loading插件

    /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...

  2. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  3. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  4. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...

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

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

  6. loading插件(原创)

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...

  7. 自定义vue全局组件use使用

    自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...

  8. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  9. Vue实战之插件 sweetalert 的使用

    安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { ...

随机推荐

  1. mssql sqlserver 如何编写case when 多条件呢?

    摘要: 下文讲述case when中多条件的编写方法,如下所示: 实验环境:sql server 2008 R2  case when 多条件编写方法  case when多条件编写语法: case ...

  2. 初级模拟电路:3-10 BJT实现开关电路

    回到目录 1. 基本用法 用BJT晶体管实现开关功能是经常会用到的实用电路.和逻辑门电路类似,当BJT用于开关电路时,也只工作于饱和区和截止区. 开关功能的实现电路如下图所示,负载可以是发光二极管.电 ...

  3. JVM 类的加载机制

    在对类的实例化之前.JVM 一般会先进行初始化 主要经过如下几个阶段: 1.加载                       类加载的第一阶段,类加载时机有两个: 1.预加载:当虚拟机启动时,会预加载 ...

  4. 【西北师大-2108Java】第八次作业成绩汇总

    [西北师大-2108Java]第八次作业成绩汇总 作业题目 面向对象程序设计(JAVA)--第10周学习指导及要求 实验目的与要求 (1)掌握java异常处理技术: (2)了解断言的用法: (3)了解 ...

  5. python的imread、newaxis

    一:imread 用来读取图片,返回一个numpy.ndarray类型的多维数组,具有两个参数: 参数1 filename, 读取的图片文件名,可以使用相对路径或者绝对路径,但必须带完整的文件扩展名( ...

  6. Re-爬楼梯

    题目地址 https://dn.jarvisoj.com/challengefiles/CFF_100.rar.dbeee1536c0a5ef5844f42c93602aae5 看看功能,看样子要爬到 ...

  7. cf rock is push 【dp】

    附上学习的博客:https://blog.csdn.net/u013534123/article/details/102762673 大致题意:一个迷宫,里面有很多箱子,你可以向右或者向下走.当你遇到 ...

  8. ccf再卖菜

    https://blog.csdn.net/imotolove/article/details/82777819 记忆化搜索,还不太理解..

  9. Python爬虫大作业

    一.题目: 获取并保存目标网站的下图所示的所有英文名,网页转换通过点击more names刷新名字并将各个英文名子目录下,去获取并保存每一个英文名的名字.性别.寓意.简介如下图所示内容红色标记框内的内 ...

  10. python--基础知识点梳理(一)数据类型、迭代生成装饰器、函数

    可变数据类型和不可变数据类型有哪些? # 可变数据类型:列表.字典.集合 # 不可变数据类型:数字.元祖.字符串 常见数据结构 # 栈(stack)--先进后出. 队列(queue)-先进先出.链表( ...