vue 实现loading插件

vue

1、首先创建loading文件夹添加index.js和index.vue

//index.js

import 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

回到顶部