vue自定义全局组件(自定义插件)的用法


Posted in Javascript onJanuary 30, 2018

有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件。

首先写这个插件之前生成好一个目录来存放这个插件。博主我是将他放在一个component的loading目录下:

vue自定义全局组件(自定义插件)的用法

在该目录下,按博主习惯是写一个index.js文件还有一个组件loading.vue,index.js里面写的是关于loading.vue的install方法。代码如下所示:

import LoadingComponent from './Loading.vue'

const Loading={
  install:function (Vue) {
    Vue.component('Loading',LoadingComponent)
  }
}
export default Loading

其中install方法表示在main.js中,如果使用Vue.use()方法的话,则该方法默认会调用install方法。在install方法里面还注册了组件,这里面'Loading'指的是外面App.vue使用的组件名,LoadingComponent指的是上面引过来的Loading.vue。之后通过export default Loading导出。

然后Loading.vue代码如下所示:

<template>
  <div class="loading-box">
    Loading...
  </div>
</template>
<script></script>

Loading.vue代码写完后然后就在默认的main.js文件中导入,通过使用Vue.use()方法导入刚刚写好的index.js:

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use(Loading)
new Vue({
 el: '#app',
 render: h => h(App)
})

然后就在App.vue方法里面使用该模板就可以了:

<template>
 <div id="app">
  <Loading></Loading>
 </div>
</template>

你也可以在刚刚的loading.vue文件里面写自己的一些代码,比如写一个日历插件,按钮插件等等。如下面这个:

<template>
  <div class="loader">
    <div class="loader-inner ball-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<style scoped>
  .loader{
    width:80px;
    height: 80px;
    margin:50px auto;
  }
  @keyframes ball-spin-fade-loader {
    50% {
      opacity: 0.3;
      -webkit-transform: scale(0.4);
      transform: scale(0.4); }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

  .ball-spin-fade-loader {
    position: relative; }
  .ball-spin-fade-loader > div:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
    animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > div:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > div {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

效果是一个滚动的圆:

vue自定义全局组件(自定义插件)的用法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
URL地址中的#符号使用说明
Feb 12 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
vue2.0之多页面的开发的示例
Jan 30 #Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 #Javascript
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
5 种JavaScript编码规范
Jan 30 #Javascript
vue源码入口文件分析(推荐)
Jan 30 #Javascript
Vue精简版风格指南(推荐)
Jan 30 #Javascript
详解javascript常用工具类的封装
Jan 30 #Javascript
You might like
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python+opencv实现动态物体识别
2018/01/09 Python
实例介绍Python中整型
2019/02/11 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Pycharm github配置实现过程图解
2020/10/13 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
应届生保险求职信
2013/11/11 职场文书
车队司机自我鉴定
2014/03/02 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
表扬稿格式范文
2015/01/16 职场文书
项目经理岗位职责
2015/01/31 职场文书
财务会计求职信范文
2015/03/20 职场文书
导游词之日月潭
2019/11/05 职场文书