在
Vue2中
封装loading可以通过自定义指令或者组件来实现。下面分别介绍这两种方式：
1. 自定义指令：
```
javascript
// main.
js
Vue.directive('
loading', {
bind: function (el, binding) {
const
loadingText = document.createElement('span');
loadingText.className = '
loading-text';
loadingText.innerHTML = '
Loading...';
const
loadingSpinner = document.createElement('div');
loadingSpinner.className = '
loading-spinner';
const
loadingContainer = document.createElement('div');
loadingContainer.className = '
loading-container';
loadingContainer.appendChild(
loadingText);
loadingContainer.appendChild(
loadingSpinner);
el.appendChild(
loadingContainer);
if (binding.value) {
el.classList.add('
loading');
}
},
update: function (el, binding) {
if (binding.value) {
el.classList.add('
loading');
} else {
el.classList.remove('
loading');
}
}
});
// 使用指令
<template>
<div v-
loading="is
Loading">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
is
Loading: false
};
},
methods: {
fetchData() {
this.is
Loading = true;
// 发起请求
// 请求结束后将is
Loading设置为false
}
}
}
</script>
```
2.
封装组件：
```
vue
<template>
<div class="
loading-container" v-if="is
Loading">
<span class="
loading-text">
Loading...</span>
<div class="
loading-spinner"></div>
</div>
<div v-else>
<!-- 内容 -->
</div>
</template>
<script>
export default {
props: {
is
Loading: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped>
.
loading-container {
position: relative;
}
.
loading-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.
loading-spinner {
/* 样式自定义 */
}
</style>
```
使用组件：
```
vue
<template>
<div>
<
loading :is-
loading="is
Loading"></
loading>
<!-- 内容 -->
</div>
</template>
<script>
import
Loading from './
Loading.
vue';
export default {
components: {
Loading
},
data() {
return {
is
Loading: false
};
},
methods: {
fetchData() {
this.is
Loading = true;
// 发起请求
// 请求结束后将is
Loading设置为false
}
}
}
</script>
```
以上就是
Vue2中
封装loading的两种方式，你可以根据自己的需求选择适合的方式来实现。
1750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
