Vue自定义插件(组件)Loading

vue.use()方法可以用来注册组件或者插件。

只要传入一个install()方法既可以注册

install(Vue,option){}

可以通过几种方式来自定义开发

Vue.$loading = …//直接挂载在Vue类上

Vue.propertype.$loading = …//直接挂载在Vue原型链上,可以通过this.$loading调用

Vue.component()//注册一个全局组件

Vue.directive()//注册全局指令

Vue.mixin()//全局混入,可以理解为继承

Vue.observable()//可以理解为小型vuex

要怎么用可以根据情况定义,既可以注册全局组件或者指令,也可以把实例直接挂载原型链上

Loading.vue

index.js

用混入来发布内容,create hook函数内的内容会在每个子组件中最先执行

同样也可以通过原型链,或者注册组件,注册指令等方式完成

在main.js中,通过Vue.use()来执行install安装函数,进行真正的注册。

import loading from ‘./assets/lib/loading‘

Vue.use(loading)

可以向Vue.use()传入一个option对象,对象用于传值,不使用则会使用默认值

{propsData:{text,image,textStyle}}

eq:  Vue.use(loading,{propsData:{textStyle:{fontSize:’12px’}})

通过this.$loading.show() || hide()来改变组件的显示和隐藏。

可以用在httprequest发送前和respond之后.

效果:

原文地址:https://www.cnblogs.com/chujunqiao/p/12421946.html

时间: 2024-10-31 04:36:21

Vue自定义插件(组件)Loading的相关文章

vue自定义插件及使用

一.Vue插件有什么用 插件通常会为 Vue 添加全局功能.所谓全局:即不需要像组件那样,每次使用他前都需要先引入一次.对于插件只要在最开始引入一次,在任何组件就可以直接使用.(类似于我们在window上添加的方法属性那样,任何地方都可以用)插件能实现的功能没有限制,不过常见下面几种: 通过插件,添加全局方法或者属性通过插件,添加全局资源:指令/过滤器/过渡等通过插件(使用全局 mixin 方法),添加一些组件选项通过插件,添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上

Vue自定义插件方法大全

新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 console.log(this.test) //pomelo 通过原型链添加方法,同理 2.通过Vue的插件机制 (常用方法) (1) 以util.js为插件文件,则需在项目入口文件main.js中引入: import Utile from './lib/utils' Vue.use(Utile) (2

vue自定义select组件

1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据,但在我平时用v-model只是在input中使用过,只知道v-model可以双向绑定数据,但并不清楚其中的实现过程,所以 需要清晰的了解v-model是什么,如下. <input v-model="test"/> <input :value="test"

Vue自定义日历组件

今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart="true" :calendarType="1" :markDate="markDate" :markDateClass="markDateClass" :agoDayPrevent="agoDayPrevent&qu

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

vue自定义分页组件---切图网

vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重新切图,重新VUE开发的项目来说,自定义分页组件才是应万变的最佳打开方式. html <template> <div class="pagination" v-if="totalPage>1"> <span v-if="!s

vue 自定义image组件

介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数来判断图片加载状态.当图片加载完成时会触发load事件:图片加载出错会触发error事件 // 样本 <img src="..." @load=onLoad @error=onError> 2.图片模式 通过css属性 object-fit(https://developer.

vue自定义日期组件

vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 calendar 的样式 Props type(String): 默认 single(选择单天),可选 range(选择多天) / time(选择单天 + 时间) isAbandon(Boolean): 默认 true,早于系统日期的日期选项是否不可选 showInput(Boolean): 默认

vue 自定义模版组件

vue的组件可以自定义内容,属性 又有slot作配合 可以做出很多自定义模版 例子 <body> <div id="app"> <m-modal modal-title="提醒" @on-ok="ok"></m-modal> <m-modal> <ul slot="modal-content"> <li v-for="item of lis