vue自定义全局组件

以自定义下载loading为例

1.首先创建自定义组件文件

 

2.编辑下载loading自定义组件中的内容

<template>
  <div>
    <el-dialog
      fullscreen
      modal-append-to-body
      custom-class="data-download"
      :visible="downloadLoading"
      :show-close="false"
    >
      <h3>文件正在生成中，已用时 {{ takedTime }} s...</h3>
      <div class="data-download-progress">
        <el-progress
          text-inside
          :stroke-width="28"
          :percentage="downloadOver ? 100 : percentage"
        ></el-progress>
        <el-button @click="cancelDownload" size="mini" type="warning" round>
          取消下载
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'downloadDialog',
  props: {
    downloadLoading: {
      default: false
    },
    downloadOver: {
      default: false
    }
  },
  data() {
    return {
      // 下载 - 已耗时
      takedTime: 0,
      // 下载 - 百分比
      percentage: 0,
      // 下载 - 计时器
      downloadTimer: ''
    };
  },
  created() {},
  watch: {
    downloadLoading() {
      if (this.downloadLoading) {
        this.takedTime = 0;
        this.percentage = 0;
        this.downloadTimer = setInterval(() => {
          this.takedTime++;
          if (this.percentage < 99) this.percentage += 2;
          if (this.percentage > 99) this.percentage = 99;
        }, 1000);
      } else {
        clearInterval(this.downloadTimer);
      }
    }
  },
  methods: {
    cancelDownload() {
      this.$confirm(`文件正在生成中, 是否取消下载？`, '取消下载', {
        confirmButtonText: '取消下载',
        cancelButtonText: '继续下载',
        type: 'warning'
      }).then(() => {
        clearInterval(this.downloadTimer);
        this.$emit('cancelDownload');
      });
    }
  }
};
</script>

<style lang="scss">
.data-download {
  background-color: rgba(255, 255, 255, 0.8) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    height: 100%;
    max- 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h3 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
  &-progress {
     500px;
    display: flex;
    .el-progress {
      flex: 1;
    }
    .el-button {
      margin-left: 10px;
    }
  }
}
</style>

3.编辑 downloadDialog 中index.js中的内容

// 引入组件
import DownloadDialogLoading from './index.vue';

// 自定义组件对象
const DownloadDialog = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数
  install: function(Vue) {
    // Vue.component() 与正常的全局注册组件用法相同，可以理解为通过 install 和 Vue.use()函数注册了全局组件
    Vue.component('DownloadDialog', DownloadDialogLoading);
  }
}
// 导出
export default DownloadDialog;

4.在main.js中导入使用

// 全局引入自定义下载 loading
import DownloadDialog from '@/components/DownloadDialog/index.js';
Vue.use(DownloadDialog);

5.在组件中直接使用

　　这里使用不需要导入，注册

　　1.导入：import DownloadDialog from '@/components/DownloadDialog/index.vue'

　　2.注册：components: {

　　　　　　　　DownloadDialog

　　　　　　}

<template>
  <div class="home">
    <!-- 下载进度提示 -->
    <DownloadDialog
      @cancelDownload="cancelDownload"
      :downloadOver="downloadOver"
      :downloadLoading="downloadLoading"
    ></DownloadDialog>
  </div>
</template>