由于 vant-loading 不满足项目要求,所以封装此组件,用于嵌套需要 loading 的元素
1.封装公共组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <template>
<div class="common-loading-wrap">
<slot></slot>
<div v-show="loading" class="common-loading">
<van-loading v-if="loading" color="var(--van-primary-color)" />
<div class="common-loading-mask"></div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
name: 'CommonLoading',
props: {
loading: {
type: Boolean,
default: false,
},
},
setup() {
const state = reactive({})
return {
...toRefs(state),
}
},
})
</script>
<style lang="less" scoped>
.common-loading-wrap {
position: relative;
.common-loading {
.van-loading {
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1001;
}
.common-loading-mask {
position: fixed;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.4);
z-index: 1000;
top: 0;
left: 0;
}
}
}
</style>
|
2.组件使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <template>
<!-- 页面 -->
<div class="patrol-page">
<common-loading :loading="listLoading">
<van-pull-refresh v-model="loading" @refresh="onRefresh">
<div v-if="total">内容区</div>
<van-empty v-else description="暂无数据" />
</van-pull-refresh>
</common-loading>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import commonLoading from '@/components/commonLoading/index.vue'
export default defineComponent({
components: { commonLoading },
setup() {}
})
</script>
<style lang="less" scoped>
</style>
|
