你绝对疏忽的 vue 技巧 - 三

同名公众号 - 人生代码

于 2020-07-03 00:01:51 发布

阅读量783

点赞数

分类专栏：公众号文章 javascript入门学习微信公众号文章标签： vue js javascript jquery react

本文链接：https://blog.csdn.net/qq_36772866/article/details/107096598

版权

公众号文章同时被 3 个专栏收录

50 篇文章 12 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

微信公众号

29 篇文章 11 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

javascript入门学习

25 篇文章 11 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何开发和改造Vue的loading组件，使其能够通过Vue.extend成为全局组件，并能像element-ui那样通过this.$loading方便地调用。改造过程包括将组件props改为data、使用Vue.extend以及挂载到Vue.prototype上。

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

开发loading组件

<template>
  <transition name="custom-loading-fade">
    <!--loading蒙版-->
    <div v-show="visible" class="custom-loading-mask">
      <!--loading中间的图标-->
      <div class="custom-loading-spinner">
        <i class="custom-spinner-icon"></i>
        <!--loading上面显示的文字-->
        <p class="custom-loading-text">{
   { text }}</p>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
  // 是否显示loading
    visible: {
      type: Boolean,
      default: false
    },
    // loading上面的显示文字
    text: {