vdesign-ui 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/activityviews/index.vue +69 -27
- package/dist/components/activityviews/style.less +18 -0
- package/dist/components/dialog/index.vue +5 -1
- package/dist/components/empty/index.vue +34 -21
- package/dist/components/empty/style.less +7 -18
- package/dist/components/mixins/languageMixin.js +0 -1
- package/dist/components/popup/index.js +7 -0
- package/dist/components/popup/index.vue +243 -0
- package/dist/components/skeleton/index.vue +156 -92
- package/dist/vdesign-ui.common.js +337 -262
- package/dist/vdesign-ui.css +1 -1
- package/dist/vdesign-ui.umd.js +337 -262
- package/dist/vdesign-ui.umd.min.js +3 -3
- package/package.json +1 -1
|
@@ -1,142 +1,206 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="vd-skeleton" :class="{ 'vd-skeleton--animate': animate }">
|
|
3
|
-
<template v-if="loading">
|
|
4
|
-
<div class="vd-skeleton__img" v-if="img"></div>
|
|
5
|
-
<div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
|
|
6
|
-
<div class="vd-skeleton__button" v-if="button"></div>
|
|
7
|
-
<div class="vd-skeleton__img--s" v-if="sImg"></div>
|
|
8
|
-
<div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
|
|
9
|
-
<div v-if="paragraph || text" class="vd-skeleton__content">
|
|
10
|
-
<div class="vd-skeleton__text" v-if="text"></div>
|
|
11
|
-
<template v-if="paragraph">
|
|
12
|
-
<div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
|
|
13
|
-
'is-last': item === rows && rows > 1,
|
|
14
|
-
}">
|
|
15
|
-
</div>
|
|
16
|
-
</template>
|
|
17
|
-
</div>
|
|
18
|
-
<div class="vd-skeleton__stock" v-if="stock">
|
|
19
|
-
<div class="vd-skeleton__stock--left">
|
|
20
|
-
<span class="vd-skeleton__stock--data"></span>
|
|
21
|
-
<span class="vd-skeleton__stock--subdatax"></span>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="vd-skeleton--space">
|
|
24
|
-
<div class="vd-skeleton__stock--center"></div>
|
|
25
|
-
<div class="vd-skeleton__stock--right spacing">
|
|
26
|
-
<span class="vd-skeleton__stock--title"></span>
|
|
27
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="vd-skeleton__stock" v-if="data">
|
|
32
|
-
<div class="vd-skeleton__stock--left">
|
|
33
|
-
<span class="vd-skeleton__stock--data"></span>
|
|
34
|
-
<span class="vd-skeleton__stock--subdatal"></span>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="vd-skeleton--space">
|
|
37
|
-
<div class="vd-skeleton__stock--right">
|
|
38
|
-
<span class="vd-skeleton__stock--title"></span>
|
|
39
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
40
|
-
</div>
|
|
41
|
-
<div class="vd-skeleton__stock--right">
|
|
42
|
-
<span class="vd-skeleton__stock--title"></span>
|
|
43
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
44
|
-
</div>
|
|
45
|
-
<div class="vd-skeleton__stock--right">
|
|
46
|
-
<span class="vd-skeleton__stock--title"></span>
|
|
47
|
-
<span class="vd-skeleton__stock--text"></span>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="vd-skeleton__equally" v-if="equally">
|
|
52
|
-
<div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
|
|
53
|
-
</div>
|
|
54
|
-
</template>
|
|
55
|
-
<template v-else>
|
|
56
|
-
<slot></slot>
|
|
57
|
-
</template>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
60
|
-
|
|
61
1
|
<script>
|
|
62
|
-
const prefixCls = 'vd-skeleton'
|
|
2
|
+
const prefixCls = 'vd-skeleton';
|
|
63
3
|
export default {
|
|
64
4
|
name: 'vd-skeleton',
|
|
65
5
|
props: {
|
|
66
|
-
|
|
6
|
+
row: {
|
|
67
7
|
type: Number,
|
|
68
|
-
default: 4
|
|
8
|
+
default: 4,
|
|
69
9
|
},
|
|
70
10
|
img: {
|
|
71
|
-
type: Boolean
|
|
11
|
+
type: Boolean,
|
|
72
12
|
},
|
|
73
13
|
title: {
|
|
74
|
-
type: Boolean
|
|
14
|
+
type: [Boolean, String],
|
|
15
|
+
default: false,
|
|
16
|
+
validator: (value) => {
|
|
17
|
+
return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
|
|
18
|
+
},
|
|
75
19
|
},
|
|
76
20
|
button: {
|
|
77
|
-
type: Boolean
|
|
21
|
+
type: Boolean,
|
|
78
22
|
},
|
|
79
23
|
paragraph: {
|
|
80
|
-
type: Boolean
|
|
24
|
+
type: Boolean,
|
|
81
25
|
},
|
|
82
26
|
sImg: {
|
|
83
|
-
type: Boolean
|
|
27
|
+
type: Boolean,
|
|
84
28
|
},
|
|
85
29
|
avatar: {
|
|
86
|
-
type: Boolean
|
|
30
|
+
type: [Boolean, String],
|
|
31
|
+
default: false,
|
|
32
|
+
validator: (value) => {
|
|
33
|
+
return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
|
|
34
|
+
},
|
|
87
35
|
},
|
|
88
36
|
text: {
|
|
89
|
-
type: Boolean
|
|
37
|
+
type: Boolean,
|
|
90
38
|
},
|
|
91
39
|
stock: {
|
|
92
|
-
type: Boolean
|
|
40
|
+
type: Boolean,
|
|
93
41
|
},
|
|
94
42
|
data: {
|
|
95
|
-
type: Boolean
|
|
43
|
+
type: Boolean,
|
|
96
44
|
},
|
|
97
45
|
equally: {
|
|
98
|
-
type: Boolean
|
|
46
|
+
type: Boolean,
|
|
99
47
|
},
|
|
100
48
|
equallys: {
|
|
101
49
|
type: Number,
|
|
102
|
-
default: 2
|
|
50
|
+
default: 2,
|
|
103
51
|
},
|
|
104
52
|
height: {
|
|
105
|
-
type: Number
|
|
53
|
+
type: Number,
|
|
106
54
|
},
|
|
107
55
|
animate: {
|
|
108
56
|
type: Boolean,
|
|
109
|
-
default: true
|
|
110
|
-
},
|
|
111
|
-
titleSize: {
|
|
112
|
-
type: String,
|
|
113
|
-
default: 'l'
|
|
114
|
-
},
|
|
115
|
-
avatarSize: {
|
|
116
|
-
type: String,
|
|
117
|
-
default: 's'
|
|
57
|
+
default: true,
|
|
118
58
|
},
|
|
119
59
|
loading: {
|
|
120
60
|
type: Boolean,
|
|
121
|
-
default: true
|
|
61
|
+
default: true,
|
|
122
62
|
},
|
|
123
63
|
},
|
|
124
64
|
computed: {
|
|
125
65
|
titleClasses() {
|
|
126
|
-
|
|
127
|
-
|
|
66
|
+
let size = 's'; // 默认尺寸
|
|
67
|
+
if (typeof this.title === 'string' && ['s', 'm', 'l'].includes(this.title)) {
|
|
68
|
+
size = this.title;
|
|
128
69
|
}
|
|
70
|
+
return {
|
|
71
|
+
[`${prefixCls}__title--${size}`]: true,
|
|
72
|
+
};
|
|
129
73
|
},
|
|
130
74
|
avatarClasses() {
|
|
131
|
-
|
|
132
|
-
|
|
75
|
+
let size = 's'; // 默认尺寸
|
|
76
|
+
if (typeof this.avatar === 'string' && ['s', 'm', 'l'].includes(this.avatar)) {
|
|
77
|
+
size = this.avatar;
|
|
133
78
|
}
|
|
79
|
+
return {
|
|
80
|
+
[`${prefixCls}__avatar--${size}`]: true,
|
|
81
|
+
};
|
|
134
82
|
},
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
|
|
83
|
+
},
|
|
84
|
+
render(h) {
|
|
85
|
+
if (this.loading) {
|
|
86
|
+
return h(
|
|
87
|
+
'div',
|
|
88
|
+
{
|
|
89
|
+
class: [prefixCls, { [`${prefixCls}--animate`]: this.animate }],
|
|
90
|
+
},
|
|
91
|
+
[
|
|
92
|
+
// 图片占位符
|
|
93
|
+
this.img ? h('div', { class: `${prefixCls}__img` }) : null,
|
|
94
|
+
// 标题占位符
|
|
95
|
+
this.title
|
|
96
|
+
? h('div', {
|
|
97
|
+
class: [`${prefixCls}__title`, this.titleClasses],
|
|
98
|
+
})
|
|
99
|
+
: null,
|
|
100
|
+
// 按钮占位符
|
|
101
|
+
this.button ? h('div', { class: `${prefixCls}__button` }) : null,
|
|
102
|
+
// 小图片占位符
|
|
103
|
+
this.sImg ? h('div', { class: `${prefixCls}__img--s` }) : null,
|
|
104
|
+
// 头像占位符
|
|
105
|
+
this.avatar
|
|
106
|
+
? h('div', {
|
|
107
|
+
class: [`${prefixCls}__avatar`, this.avatarClasses],
|
|
108
|
+
})
|
|
109
|
+
: null,
|
|
110
|
+
// 段落和文本占位符
|
|
111
|
+
(this.paragraph || this.text)
|
|
112
|
+
? h(
|
|
113
|
+
'div',
|
|
114
|
+
{ class: `${prefixCls}__content` },
|
|
115
|
+
[
|
|
116
|
+
this.text ? h('div', { class: `${prefixCls}__text` }) : null,
|
|
117
|
+
this.paragraph
|
|
118
|
+
? Array.from({ length: this.row }).map((_, index) =>
|
|
119
|
+
h('div', {
|
|
120
|
+
key: index,
|
|
121
|
+
class: [
|
|
122
|
+
`${prefixCls}__paragraph`,
|
|
123
|
+
{
|
|
124
|
+
'is-last':
|
|
125
|
+
index === this.row - 1 && this.row > 1,
|
|
126
|
+
},
|
|
127
|
+
],
|
|
128
|
+
})
|
|
129
|
+
)
|
|
130
|
+
: null,
|
|
131
|
+
].filter(Boolean)
|
|
132
|
+
)
|
|
133
|
+
: null,
|
|
134
|
+
// 股票占位符
|
|
135
|
+
this.stock
|
|
136
|
+
? h('div', { class: `${prefixCls}__stock` }, [
|
|
137
|
+
h('div', { class: `${prefixCls}__stock--left` }, [
|
|
138
|
+
h('span', { class: `${prefixCls}__stock--data` }),
|
|
139
|
+
h('span', { class: `${prefixCls}__stock--subdatax` }),
|
|
140
|
+
]),
|
|
141
|
+
h('div', { class: `${prefixCls}--space` }, [
|
|
142
|
+
h('div', { class: `${prefixCls}__stock--center` }),
|
|
143
|
+
h(
|
|
144
|
+
'div',
|
|
145
|
+
{
|
|
146
|
+
class: [`${prefixCls}__stock--right`, 'spacing'],
|
|
147
|
+
},
|
|
148
|
+
[
|
|
149
|
+
h('span', { class: `${prefixCls}__stock--title` }),
|
|
150
|
+
h('span', { class: `${prefixCls}__stock--text` }),
|
|
151
|
+
]
|
|
152
|
+
),
|
|
153
|
+
]),
|
|
154
|
+
])
|
|
155
|
+
: null,
|
|
156
|
+
// 数据占位符
|
|
157
|
+
this.data
|
|
158
|
+
? h('div', { class: `${prefixCls}__stock` }, [
|
|
159
|
+
h('div', { class: `${prefixCls}__stock--left` }, [
|
|
160
|
+
h('span', { class: `${prefixCls}__stock--data` }),
|
|
161
|
+
h('span', { class: `${prefixCls}__stock--subdatal` }),
|
|
162
|
+
]),
|
|
163
|
+
h('div', { class: `${prefixCls}--space` }, [
|
|
164
|
+
h('div', { class: `${prefixCls}__stock--right` }, [
|
|
165
|
+
h('span', { class: `${prefixCls}__stock--title` }),
|
|
166
|
+
h('span', { class: `${prefixCls}__stock--text` }),
|
|
167
|
+
]),
|
|
168
|
+
h('div', { class: `${prefixCls}__stock--right` }, [
|
|
169
|
+
h('span', { class: `${prefixCls}__stock--title` }),
|
|
170
|
+
h('span', { class: `${prefixCls}__stock--text` }),
|
|
171
|
+
]),
|
|
172
|
+
h('div', { class: `${prefixCls}__stock--right` }, [
|
|
173
|
+
h('span', { class: `${prefixCls}__stock--title` }),
|
|
174
|
+
h('span', { class: `${prefixCls}__stock--text` }),
|
|
175
|
+
]),
|
|
176
|
+
]),
|
|
177
|
+
])
|
|
178
|
+
: null,
|
|
179
|
+
// 等分占位符
|
|
180
|
+
this.equally
|
|
181
|
+
? h(
|
|
182
|
+
'div',
|
|
183
|
+
{ class: `${prefixCls}__equally` },
|
|
184
|
+
Array.from({ length: this.equallys }).map((_, index) =>
|
|
185
|
+
h('div', {
|
|
186
|
+
key: index,
|
|
187
|
+
class: `${prefixCls}__img`,
|
|
188
|
+
style: { height: `${this.height}px` },
|
|
189
|
+
})
|
|
190
|
+
)
|
|
191
|
+
)
|
|
192
|
+
: null,
|
|
193
|
+
].filter(Boolean)
|
|
194
|
+
);
|
|
195
|
+
} else {
|
|
196
|
+
// 返回插槽内容
|
|
197
|
+
return this.$slots.default ? this.$slots.default : null;
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
};
|
|
138
201
|
</script>
|
|
139
202
|
|
|
140
203
|
<style lang="less">
|
|
141
204
|
@import './style.less';
|
|
205
|
+
|
|
142
206
|
</style>
|