Muy buenas gente.
Estoy con la creación de un loading usando vuejs y elementui y me gustaría saber cómo personalizarlo.
En la documentación de elementui aparecen dos tipos diferentes pero lo que intento hacer es que en vez de mostrar el típico circulo que gira, mostrara un gif, llamase a algún otro componente o mostrara cualquier cosa editada por mi. El ejemplo seria parecido a este.
<template>
<el-button
type="primary"
@click="openFullScreen1"
v-loading.fullscreen.lock="fullscreenLoading">
As a directive
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
As a service
</el-button>
</template>
<script>
export default {
data() {
return {
fullscreenLoading: false
}
},
methods: {
openFullScreen1() {
this.fullscreenLoading = true;
setTimeout(() => {
this.fullscreenLoading = false;
}, 2000);
},
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
}
}
</script>
Gracias