不管是使用框架，還是不使用任何的框架，我們都不可避免的需要與“加載中……”打交道，剛剛學習了Vuejs自定義組件的寫法，就現學現賣，介紹一下吧！

先看一下目錄結構，一般情況下，每一個組件都新建一個新的文件夾，里面包含對應的vue文件，和Index.js，如下圖：

如果想要像Mint-UI一樣，在任一.vue文件中，僅僅使用一個<loading></loading>標簽即可使用該組件的話，其實也沒有那么的深奧難懂的。

在main.js文件中：

import Loading from "./components/loading/index" Vue.use(Loading);

　也就兩句代碼解決，一句是ES6語法引入該loading模塊，另一句則是使用use來使用該模塊，　Vue.use(Loading)

　這種全局組件，其實說起來很像jquery中的自定義插件一樣，這里我們所有代碼寫在./components/loading/index.js文件中：

import LoadingComponent from "./Loading.vue"; export default {install: function (Vue) {Vue.component("loading", LoadingComponent)} }

　　也是兩句代碼，一句引入?"./Loading.vue"， 下一句就是將該組件導出，這里就存在一個關鍵點：install， 只有使用install了，我們在main.js中，才能夠直接use該組件，而install函數默認自帶一個參數Vue，也就是我們正在使用的Vue對象，然后定義loading這一組件，也是正常的Vue定義組件的方法: Vue.component("loading", LoadingComponent)，這里的“loading”的名稱，也就是我們后面使用組件時的標簽名稱。

　　至于該組件長什么樣，有什么效果，直接在Loading.vue文件里面定義就可以了，并不受任何其他文件的影響。

　　從網上扒下來一個loading的動畫效果的示例：　

<template><div class="loader"><div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div></div> </template>　　 .loader {box-sizing: border-box;display: flex;flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%;max-width: 25%;height: 200px;align-items: center;justify-content: center; }.pacman {position: relative; } .pacman > div:nth-child(2) {-webkit-animation: pacman-balls 1s 0s infinite linear;animation: pacman-balls 1s 0s infinite linear; } .pacman > div:nth-child(3) {-webkit-animation: pacman-balls 1s 0.33s infinite linear;animation: pacman-balls 1s 0.33s infinite linear; } .pacman > div:nth-child(4) {-webkit-animation: pacman-balls 1s 0.66s infinite linear;animation: pacman-balls 1s 0.66s infinite linear; } .pacman > div:nth-child(5) {-webkit-animation: pacman-balls 1s 0.99s infinite linear;animation: pacman-balls 1s 0.99s infinite linear; } .pacman > div:first-of-type {width: 0px;height: 0px;border-right: 25px solid transparent;border-top: 25px solid #399;border-left: 25px solid #399;border-bottom: 25px solid #399;border-radius: 25px;-webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;animation: rotate_pacman_half_up 0.5s 0s infinite; } .pacman > div:nth-child(2) {width: 0px;height: 0px;border-right: 25px solid transparent;border-top: 25px solid #399;border-left: 25px solid #399;border-bottom: 25px solid #399;border-radius: 25px;-webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;animation: rotate_pacman_half_down 0.5s 0s infinite;margin-top: -50px; } .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {background-color: #399;width: 15px;height: 15px;border-radius: 100%;margin: 2px;width: 10px;height: 10px;position: absolute;-webkit-transform: translate(0, -6.25px);-ms-transform: translate(0, -6.25px);transform: translate(0, -6.25px);top: 25px;left: 100px; }@-webkit-keyframes rotate_pacman_half_up {0% {-webkit-transform: rotate(270deg);transform: rotate(270deg); }50% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }100% {-webkit-transform: rotate(270deg);transform: rotate(270deg); } }@keyframes rotate_pacman_half_up {0% {-webkit-transform: rotate(270deg);transform: rotate(270deg); }50% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }100% {-webkit-transform: rotate(270deg);transform: rotate(270deg); } }@-webkit-keyframes rotate_pacman_half_down {0% {-webkit-transform: rotate(90deg);transform: rotate(90deg); }50% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }100% {-webkit-transform: rotate(90deg);transform: rotate(90deg); } }@keyframes rotate_pacman_half_down {0% {-webkit-transform: rotate(90deg);transform: rotate(90deg); }50% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }100% {-webkit-transform: rotate(90deg);transform: rotate(90deg); } }@-webkit-keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }@keyframes pacman-balls {75% {opacity: 0.7; }100% {-webkit-transform: translate(-100px, -6.25px);transform: translate(-100px, -6.25px); } }

　　

?

轉載于:https://www.cnblogs.com/zhuhuoxingguang/p/7193215.html

總結

以上是生活随笔為你收集整理的Vuejs自定义全局组件--loading的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。