實現一個vue-loading插件 | 進度條樣式

經過添加實例方法，手寫插件

vue插件的編寫方法分爲4類，此篇文章經過添加實例方法編寫插件

export default {
    install(Vue, options){
        Vue.prototype.$myMethods = function (options){
            // 代碼邏輯 添加實例方法，經過把它們添加到 Vue.prototype 上實現
        }
    }
}
複製代碼

插件封裝成組件

若是咱們在組件的基礎上編寫插件，咱們能夠使用Vue.extend(component)來進行，

loading插件實例

loading.vue組件

<template>
  <div class="loadings" v-show="isShow">
    <div class="c-loading">
      <div class="c-l-loading"></div><span>{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    props: {
      isShow: Boolean,
      text: {
        type: String,
        default:'正在加載中...'
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/style" scope>

  .loadings {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10000;
     @keyframes mymove
      {
        from {width:0px;}
        to {width:300px;}
      }
      .c-loading{
        width:300px;
        height:5px;
        border-radius: 10px;
        position: relative;
        background:#f3f3f3;
        span{
          float: right;
          margin-right: -60px;
          margin-top: -10px;
        }
      }
      .c-l-loading{
        width:0px;
        height:5px;
        border-radius: 5px;
        background:#409EFF;
        animation:mymove 10s ease;
        animation-fill-mode:forwards;
      }
  }
</style>
複製代碼

封裝該組件

loading.js

import loading from './loading.vue'

let $vm = null

export default{
  install(Vue, options){
    if(!$vm){
      let myLoading = Vue.extend(loading) //經過Vue.extend()方法建立了一個構造器

      $vm = new myLoading({ 
        el: document.createElement('div')
      }) //經過構造器建立$vm實例，並掛載在div上

      document.body.appendChild($vm.$el) //插入到Dom節點上
    }


    $vm.isShow = false  //建立一個屬性來控制顯隱

    let myMethods = {
      show(text) {
        $vm.isShow = true
        $vm.text = text
      },
      hide() {
        $vm.isShow = false
      }
    }

    if(!Vue.$vLoading){
      Vue.$vLoading = myMethods
      Vue.prototype.$vLoading = Vue.$vLoading  //添加實例方法
    }else{
      console.log('$vLoading方法已被佔用')
    }
  }
}
複製代碼

插件寫完以後，在main.js中全局註冊一下該插件，經過Vue.use()便可使用該插件，其會自動調用install方法，Vue.use會自動阻止屢次註冊插件。

import Vue from 'vue'
import MyLoading from './loading.js'
Vue.use(MyLoading) 

全局註冊完成以後，咱們能夠在頁面中使用 this.$vLoadingshow() 來顯示，使用 this.$vLoading.hide()來隱藏。
複製代碼