element-ui clearable 不显示_从ElementUI的loading组件说起

最新推荐文章于 2023-09-14 17:58:29 发布

weixin_39861920

最新推荐文章于 2023-09-14 17:58:29 发布

阅读量1k

点赞数

文章标签： element-ui clearable 不显示

本文链接：https://blog.csdn.net/weixin_39861920/article/details/113069569

版权

本文从Element UI的loading组件出发，探讨了loading的指令式和服务式两种模式，并通过源码分析了解其实现原理。作者在阅读源码后，尝试自己实现了一个Vue Loading插件，介绍了相关Vue.js概念如plugins、Vue.extend()、Vue.use()和vm.$nextTick()，并提供了使用示例。

摘要由CSDN通过智能技术生成

原文地址：

从ElementUI的loading组件说起alfxjx.github.io

前言

最近发现自己的主页首屏加载很慢，于是想用一个loading组件掩饰一下，这一下就来到了知识的荒原，对插件几乎一无所知，就知道v-model之流，于是学习了一下element-ui的写法，并自己写一个插件出来。

element ui 的loading文档

看一下loading的文档，发现loading除了常规的一些配置项之外，有指令式和服务式（directive&service)两种模式：

指令式是这样的：

 <el-button
    type="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();
});