脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue自定义全局组件

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

 更新时间：2018年01月30日 10:26:44   作者：Tank_in_the_street  
这篇文章主要介绍了vue自定义全局组件(自定义插件)的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

在该目录下，按博主习惯是写一个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.sync修饰符与$emit(update:xxx)详解

    Vue.sync修饰符与$emit(update:xxx)详解

    这篇文章主要介绍了Vue.sync修饰符与$emit(update:xxx),实现思路非常简单，文章介绍了.sync修饰符的作用和使用.sync修饰符的写法，实现代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-11-11
  • vue-router传递参数的几种方式实例详解

    vue-router传递参数的几种方式实例详解

    vue-router传递参数分为两大类，一类是编程式的导航 router.push另一类是声明式的导航 <router-link>，本文通过实例代码给大家介绍vue-router传递参数的几种方式，感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • vue如何解决数据加载时,插值表达式闪烁问题

    vue如何解决数据加载时,插值表达式闪烁问题

    这篇文章主要介绍了vue如何解决数据加载时,插值表达式闪烁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • vue在App.vue文件中监听路由变化刷新页面操作

    vue在App.vue文件中监听路由变化刷新页面操作

    这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 关于Vue3使用axios的配置教程详解

    关于Vue3使用axios的配置教程详解

    道axios是一个库,并不是vue中的第三方插件,下面这篇文章主要给大家介绍了关于Vue3使用axios的配置教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue.config.js中configureWebpack与chainWebpack区别及说明

    vue.config.js中configureWebpack与chainWebpack区别及说明

    这篇文章主要介绍了vue.config.js中configureWebpack与chainWebpack区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • VUE组件中的 Drawer 抽屉实现代码

    VUE组件中的 Drawer 抽屉实现代码

    这篇文章主要介绍了VUE组件 之 Drawer 抽屉 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue实现组件通信的八种方法实例

    vue实现组件通信的八种方法实例

    ue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于vue实现组件通信的八种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • Vue + better-scroll 实现移动端字母索引导航功能

    Vue + better-scroll 实现移动端字母索引导航功能

    better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下
    2018-05-05
  • 详解vuex状态管理模式

    详解vuex状态管理模式

    这篇文章主要介绍了详解vuex状态管理模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论