index.vue
1.75 KB
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
<div :class="classRender">
<span :class="spanClassRender" :style="spanStyleRender">
<template v-if="showSpinner">
<i v-for="i in 12" :key="i"></i>
</template>
<svg v-else class="zui-loading__circular" viewBox="25 25 50 50" :style="spanStyleRender">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
</span>
<template v-if="$slots.default">
<span class="zui-loading__text" :style="textStyleRender">
<slot></slot>
</span>
</template>
</div>
</template>
<script>
export default {
name: 'Loading',
props: {
color: String,
size: {
type: [Number, String],
default: '2rem',
},
vertical: Boolean,
textSize: [Number, String],
type: {
type: String,
default: 'circular',
},
},
computed: {
classRender: function () {
return {
'zui-loading': true,
['zui-loading--' + this.type]: this.type,
'zui-loading--vertical': this.vertical,
};
},
spanClassRender: function () {
return {
'zui-loading__spinner': true,
['zui-loading__spinner--' + this.type]: this.type,
};
},
spanStyleRender: function () {
var style = { color: this.color };
if (this.size) {
var iconSize = typeof this.size == 'number' ? this.size + 'px' : this.size;
style.width = iconSize;
style.height = iconSize;
}
return style;
},
textStyleRender: function () {
var textSize = typeof this.textSize == 'number' ? this.textSize + 'px' : this.textSize;
return {
fontSize: textSize,
};
},
showSpinner: function () {
return this.type == 'spinner';
},
},
};
</script>
<style>
@import './index.css';
</style>