原文地址：

從ElementUI的loading組件說起?alfxjx.github.io

前言

最近發現自己的主頁首屏加載很慢，于是想用一個loading組件掩飾一下，這一下就來到了知識的荒原，對插件幾乎一無所知，就知道v-model之流，于是學習了一下element-ui的寫法，并自己寫一個插件出來。

element ui 的loading文檔

看一下loading的文檔，發現loading除了常規的一些配置項之外，有指令式和服務式（directive&service)兩種模式：

指令式是這樣的：

<el-buttontype="primary"@click="openFullScreen"v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button> export default {data() {return {fullscreenLoading: false}}, }

服務式是這樣的：

import { Loading } from 'element-ui'; let loadingInstance = Loading.service(options); // 以服務的方式調用的 Loading 需要異步關閉 this.$nextTick(() => { loadingInstance.close(); });

可以看出，兩種模式一個是自定義指令，一個是定義了一個全局方法。

loading源碼分吸

那就看看源碼是怎么實現的吧

目錄結構是這樣的：

- loading- src- directive.js- index.js- loading.vue- index.js

還是很整齊的。

在loading/index.js中，引入了指令和服務兩種：

import directive from './src/directive'; import service from './src/index'; ? export default {install(Vue) {Vue.use(directive);Vue.prototype.$loading = service;},directive,service };

服務式的代碼（src/index.js）

// 通過vue.extend()新建一個子類LoadingConstructor // loadingvue是對應的loading的模板 const LoadingConstructor = Vue.extend(loadingVue); // 默認設置項 const defaults = {} // 設置樣式的一個方法，不是loading的重點 const addStyle = (options, parent, instance) =>{} // 主要方法 const Loading = (options = {}) => {...// 新建實例let instance = new LoadingConstructor({el: document.createElement('div'),data: options});...// 掛載，異步顯示parent.appendChild(instance.$el);Vue.nextTick(() => {instance.visible = true;});return instance } export default Loading;

指令式代碼（src/directive.js）

對于自定義指令v-loading，只需要綁定Boolean即可。默認狀況下，Loading 遮罩會插入到綁定元素的子節點，通過添加body修飾符，可以使遮罩插入至 DOM 中的 body 上。

import Loading from './loading.vue'; ... const Mask = Vue.extend(Loading); const loadingDirective = {}; // main loadingDirective.install = Vue => {const toggleLoading = (el, binding) => {if (binding.value) {Vue.nextTick(() => {// 生成dom并調用insertDOM方法插入dom})} else {afterLeave(el.instance, _ => {// 將loading刪掉})el.instance.visible = false;el.instance.hiding = true;}}const insertDom = (parent, el, binding) => {}Vue.directive('loading', {// 綁定到dombind: function(el, binding, vnode){// 新建了一個loading實例const mask = new Mask()...binding.value && toggleLoading(el, binding);},// 更新視圖update: function(el, binding) {},// 刪除視圖unbind: function(el, binding) {// ...el.instance && el.instance.$destroy();}}) } ? export default loadingDirective;

源代碼中還有很多配置項的寫法，這里就不一一說了。

vue js 中相關概念

• plugins
• Vue.extend()
• Vue.use()
• vm.$nextTick()

實現一個自己的Loading插件

起步

設置模板文件loading.vue

<template><div v-show="show" class="loading-wrapper"><img src="../../assets/loading.png" alt="" class="loading"/><p>loading...</p></div> </template> ? <script type="text/ecmascript-6">export default {name: 'loading',data() {return {show: false}}} </script> ? <style>.loading-wrapper {background: #e3e3e3;position: absolute;top: 0;left: 0;z-index: 100;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 100vh;} ?.loading {animation: rotate 2s infinite;} ?@keyframes rotate {0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}} </style> ?

index.js負責主要的邏輯

import loadingVue from './loading' ? let loading = {} ? loading.install = (Vue) => {const LoadingConstructor = Vue.extend(loadingVue)const instance = new LoadingConstructor() ?instance.$mount(document.createElement('div'))document.body.appendChild(instance.$el) ?Vue.prototype.$loading = () => {instance.show = truesetTimeout(() => {instance.show = false}, 2000)} } ? export default loading ?

使用

// main.js import loading from './plugins/loading'Vue.use(loading)// usage export default {created(){this.$loading()} }

在線演示

Ref

• Vue.js
• element ui doc
• 簡單的例子實現vue插件

總結

以上是生活随笔為你收集整理的element-ui clearable 不显示_从ElementUI的loading组件说起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。