Loading.vue
<template>
<div class="container" v-show="isShow">
<div class="loading loader-1">
<div class="loading-outer"></div>
<div class="loading-inner"></div>
</div>
</div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Loading',
data: function () {
return {
isShow: false
}
}
}
</script>
<style scoped lang="scss">
.container{
width: 200px;
height: 200px;
border-radius: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 150px;
height: 150px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
.loading-outer {
position: absolute;
border: 4px solid #f50057;
border-left-color: transparent;
border-bottom: 0;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: loading-outer 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loading-outer 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
.loading-inner {
position: absolute;
border: 4px solid #f50057;
border-radius: 50%;
width: 40px;
height: 40px;
left: calc(50% - 20px);
top: calc(50% - 20px);
border-right: 0;
border-top-color: transparent;
-webkit-animation: loading-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
animation: loading-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
}
}
@-webkit-keyframes loading-outer {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-outer {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loading-inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes loading-inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
}
</style>
index.js
import Loading from './Loading'
export default {
// 注意点: 如果要将一个组件封装成一个插件, 那么必须提供一个install方法
// 那么必须在install方法中注册当前的这个组件
install: function (Vue, Options) {
// 1.根据我们的组件生成一个构造函数
let LoadingContructor = Vue.extend(Loading)
// 2.根据构造函数创建实例对象
let LoadingInstance = new LoadingContructor()
// 3.随便创建一个标签(元素)
let oDiv = document.createElement('div')
// 4.将创建好的标签添加到界面上
document.body.appendChild(oDiv)
// 5.将创建好的实例对象挂载到创建好的元素上
LoadingInstance.$mount(oDiv)
// 添加初始化值
if (Options && Options.title !== null && Options.title !== undefined) {
LoadingInstance.title = Options.title
}
// 添加全局方法
Vue.showLoading = function () {
LoadingInstance.isShow = true
}
Vue.hiddenLoading = function () {
LoadingInstance.isShow = false
}
// 添加实例方法
Vue.prototype.$showLoading = function () {
LoadingInstance.isShow = true
}
Vue.prototype.$hiddenLoading = function () {
LoadingInstance.isShow = false
}
}
}