原文地址：

從ElementUI的loading組件說(shuō)起?alfxjx.github.io

前言

最近發(fā)現(xiàn)自己的主頁(yè)首屏加載很慢，于是想用一個(gè)loading組件掩飾一下，這一下就來(lái)到了知識(shí)的荒原，對(duì)插件幾乎一無(wú)所知，就知道v-model之流，于是學(xué)習(xí)了一下element-ui的寫法，并自己寫一個(gè)插件出來(lái)。

element ui 的loading文檔

看一下loading的文檔，發(fā)現(xiàn)loading除了常規(guī)的一些配置項(xiàng)之外，有指令式和服務(wù)式（directive&service)兩種模式：

指令式是這樣的：

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

服務(wù)式是這樣的：

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

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

loading源碼分吸

那就看看源碼是怎么實(shí)現(xiàn)的吧

目錄結(jié)構(gòu)是這樣的：

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

還是很整齊的。

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

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

服務(wù)式的代碼（src/index.js）

// 通過(guò)vue.extend()新建一個(gè)子類LoadingConstructor // loadingvue是對(duì)應(yīng)的loading的模板 const LoadingConstructor = Vue.extend(loadingVue); // 默認(rèn)設(shè)置項(xiàng) const defaults = {} // 設(shè)置樣式的一個(gè)方法，不是loading的重點(diǎn) const addStyle = (options, parent, instance) =>{} // 主要方法 const Loading = (options = {}) => {...// 新建實(shí)例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）

對(duì)于自定義指令v-loading，只需要綁定Boolean即可。默認(rèn)狀況下，Loading 遮罩會(huì)插入到綁定元素的子節(jié)點(diǎn)，通過(guò)添加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并調(diào)用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){// 新建了一個(gè)loading實(shí)例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;

源代碼中還有很多配置項(xiàng)的寫法，這里就不一一說(shuō)了。

vue js 中相關(guān)概念

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

實(shí)現(xiàn)一個(gè)自己的Loading插件

起步

設(shè)置模板文件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負(fù)責(zé)主要的邏輯

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
• 簡(jiǎn)單的例子實(shí)現(xiàn)vue插件

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。