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 相关文章推荐
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
jquery获取节点名称
Apr 26 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 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字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
详解Angular 开发环境搭建
2017/06/22 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
小小聊天室Python代码实现
2016/08/17 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
任命书格式范文
2015/09/22 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库