vue 实现loading插件
1、首先创建loading文件夹添加index.js和index.vue
//index.jsimport Loading from "./index.vue";
export default {
// 实现插件必须的install方法
install(Vue, options) {
const LoadingConstructor = Vue.extend(Loading);
let instance = new LoadingConstructor({
el: document.createElement("div"),
});
console.log(instance,options);
document.body.appendChild(instance.$el)
if (options) {
console.log(options);
}
const loadingMethods = {
show(text){
instance.show = true;
if (text) {
instance.text = text
}
},
hide(){
instance.show = false
}
}
Vue.prototype.$loading = loadingMethods
},
};
<template><!-- index.vue -->
<div class="loading-content" v-if="show">
<div class="loading-spinner">
<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
</svg>
</div>
<div class="loading-text">{{ text }}</div>
</div>
</template>
<script>
export default {
name: "loading",
props: {
show: Boolean,
text: {
type: String,
default: "加载中。。。",
},
},
};
</script>
<style>
.loading-content {
position: absolute;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.8);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.3s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.loading-spinner {
text-align: center;
}
.loading-spinner .circular {
height: 42px;
width: 42px;
animation: loading-rotate 2s linear infinite;
}
.loading-spinner .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round;
}
.loading-text {
font-size: 14px;
color: #409eff;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
to {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
</style>
2、引入到main.js中
import Vue from 'vue'import App from './App.vue'
import router from './router'
import loading from './components/loading/index'
Vue.config.productionTip = false
Vue.use(loading,{
size:'small'
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
3、组件中使用
this.$loading.show('拼命加载中。。。')setTimeout(() => {
this.$loading.hide()
}, 2000);
以上是 vue 实现loading插件 的全部内容, 来源链接: utcz.com/z/380375.html