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-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h3 {
      text-align: center;
      margin-bottom: 20px;
    }
  }
  &-progress {
    width: 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>