vdesign-ui 0.1.23 → 0.1.24-beta
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 +13 -11
- package/dist/components/button/index.vue +1 -1
- package/dist/components/checkbox/index.vue +0 -26
- package/dist/components/dropdown/index.vue +72 -69
- package/dist/components/dropdown/style.less +23 -1
- package/dist/components/empty/404-dark.png +0 -0
- package/dist/components/empty/404.png +0 -0
- package/dist/components/empty/index.vue +30 -2
- package/dist/components/empty/network-dark.png +0 -0
- package/dist/components/empty/network.png +0 -0
- package/dist/components/empty/nocoupons-dark.png +0 -0
- package/dist/components/empty/nocoupons.png +0 -0
- package/dist/components/empty/nodata-dark.png +0 -0
- package/dist/components/empty/nodata.png +0 -0
- package/dist/components/empty/nomargin-dark.png +0 -0
- package/dist/components/empty/nomargin.png +0 -0
- package/dist/components/empty/nonotice-dark.png +0 -0
- package/dist/components/empty/nonotice.png +0 -0
- package/dist/components/empty/noocomments-dark.png +0 -0
- package/dist/components/empty/noocomments.png +0 -0
- package/dist/components/empty/noorders-dark.png +0 -0
- package/dist/components/empty/noorders.png +0 -0
- package/dist/components/empty/noposition-dark.png +0 -0
- package/dist/components/empty/noposition.png +0 -0
- package/dist/components/empty/nosearch-dark.png +0 -0
- package/dist/components/empty/nosearch.png +0 -0
- package/dist/components/footer/index.vue +1 -1
- package/dist/components/footnav/footnav-item/index.vue +2 -6
- package/dist/components/icon/font/iconfont.css +59 -949
- package/dist/components/icon/font/iconfont.js +1 -1
- package/dist/components/input/index.vue +31 -8
- package/dist/components/input/style.less +0 -1
- package/dist/components/loading/img_status_loading_white_ani.svg +155 -0
- package/dist/components/loading/img_status_refresh_ani.svg +158 -0
- package/dist/components/loading/index.vue +4 -3
- package/dist/components/loading/style.less +1 -1
- package/dist/components/mixins/clickoutside.js +81 -81
- package/dist/components/pagebreak/index.vue +11 -5
- package/dist/components/radio/index.vue +0 -3
- package/dist/components/result/index.vue +1 -2
- package/dist/components/selector/index.vue +64 -31
- package/dist/components/selector/style.less +10 -0
- package/dist/components/slider/index.vue +0 -6
- package/dist/components/title/index.vue +1 -1
- package/dist/components/upload/index.vue +0 -1
- package/dist/img/img_status_loading_white_ani.b56fcfae.svg +155 -0
- package/dist/img/img_status_refresh_ani.d0e59f12.svg +158 -0
- package/dist/token.css +8 -0
- package/dist/vdesign-ui.common.js +832 -548
- package/dist/vdesign-ui.css +1 -1
- package/dist/vdesign-ui.umd.js +832 -548
- package/dist/vdesign-ui.umd.min.js +3 -3
- package/package.json +1 -1
- package/dist/components/loading/loading.png +0 -0
- package/dist/components/loading/refresh.png +0 -0
- package/dist/components/upload/index1.vue +0 -225
- package/dist/img/404-dark.775df5bb.png +0 -0
- package/dist/img/network-dark.11a147bb.png +0 -0
- package/dist/img/nodata-dark.b0ea0e39.png +0 -0
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="vd-upload" :class="{ 'vd-upload--block': (block && listData.length === 0) }">
|
|
3
|
-
<div class="vd-upload__wrapper">
|
|
4
|
-
<div class="vd-upload__uploader" :class="{ 'vd-upload__uploader--text': text }">
|
|
5
|
-
<vd-icon name="icon_btn_photo" class="vd-upload__icon"></vd-icon>
|
|
6
|
-
<p class="vd-upload__text" v-if="text">{{ text }}</p>
|
|
7
|
-
<input type="file" class="vd-upload__input" accept="image/*,.pdf" :multiple="multiple" @change="onChange"
|
|
8
|
-
:disabled="disabled">
|
|
9
|
-
</div>
|
|
10
|
-
<div class="vd-upload__preview" v-for="item in listData" :key="item.id" :class="fileCls(item.type)">
|
|
11
|
-
<div class="vd-upload__preview-img" v-if="item.type.startsWith('image')" @click="onPreview(item)">
|
|
12
|
-
<img :src="item.url" />
|
|
13
|
-
</div>
|
|
14
|
-
<div class="vd-upload__preview-word" v-if="item.type === 'application/pdf'">PDF</div>
|
|
15
|
-
<div class="vd-upload__preview-delete" @click="onDelete($event, item)" v-if="deletable">
|
|
16
|
-
<vd-icon name="icon_btn_close" class="vd-upload__preview-delete-icon"></vd-icon>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
<!-- 弹层预览区域 -->
|
|
21
|
-
<div class="vd-image-preview" v-if="isPreview" @click="closePreview">
|
|
22
|
-
<div class="vd-image-preview__item" v-for="item in listData" :key="item.id" v-show="curNum === item.id"><img
|
|
23
|
-
:src="item.url" /></div>
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
</template>
|
|
27
|
-
|
|
28
|
-
<script>
|
|
29
|
-
const prefixCls = 'vd-upload';
|
|
30
|
-
export default {
|
|
31
|
-
name: 'vd-upload',
|
|
32
|
-
model: {
|
|
33
|
-
prop: 'fileList'
|
|
34
|
-
},
|
|
35
|
-
props: {
|
|
36
|
-
uploaded: {
|
|
37
|
-
type: Boolean,
|
|
38
|
-
default: false
|
|
39
|
-
},
|
|
40
|
-
preview: {
|
|
41
|
-
type: Boolean,
|
|
42
|
-
default: true
|
|
43
|
-
},
|
|
44
|
-
block: {
|
|
45
|
-
type: Boolean,
|
|
46
|
-
default: false
|
|
47
|
-
},
|
|
48
|
-
text: {
|
|
49
|
-
type: String,
|
|
50
|
-
default: ''
|
|
51
|
-
},
|
|
52
|
-
fileList: {
|
|
53
|
-
type: Array,
|
|
54
|
-
default: () => []
|
|
55
|
-
},
|
|
56
|
-
deletable: {
|
|
57
|
-
type: Boolean,
|
|
58
|
-
default: true
|
|
59
|
-
},
|
|
60
|
-
disabled: {
|
|
61
|
-
type: Boolean,
|
|
62
|
-
default: false
|
|
63
|
-
},
|
|
64
|
-
/**
|
|
65
|
-
* 文件读取前钩子函数
|
|
66
|
-
*/
|
|
67
|
-
beforeRead: {
|
|
68
|
-
type: Function,
|
|
69
|
-
default: () => () => true
|
|
70
|
-
},
|
|
71
|
-
/**
|
|
72
|
-
* 文件读取完钩子函数
|
|
73
|
-
*/
|
|
74
|
-
afterRead: {
|
|
75
|
-
type: Function,
|
|
76
|
-
default: () => () => true
|
|
77
|
-
},
|
|
78
|
-
/**
|
|
79
|
-
* 文件删除前钩子函数
|
|
80
|
-
*/
|
|
81
|
-
beforeDelete: {
|
|
82
|
-
type: Function,
|
|
83
|
-
default: () => () => true
|
|
84
|
-
},
|
|
85
|
-
maxCount: {
|
|
86
|
-
type: Number,
|
|
87
|
-
default: 1000
|
|
88
|
-
},
|
|
89
|
-
maxSize: {
|
|
90
|
-
type: Number,
|
|
91
|
-
default: 6 * 1024 * 1024
|
|
92
|
-
},
|
|
93
|
-
multiple: {
|
|
94
|
-
type: Boolean,
|
|
95
|
-
default: false
|
|
96
|
-
},
|
|
97
|
-
},
|
|
98
|
-
data() {
|
|
99
|
-
return {
|
|
100
|
-
listData: this.fileList,
|
|
101
|
-
curNum: 1,
|
|
102
|
-
isPreview: false
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
watch: {
|
|
106
|
-
/**
|
|
107
|
-
* 监听列表数据
|
|
108
|
-
*/
|
|
109
|
-
fileList: {
|
|
110
|
-
handler(value) {
|
|
111
|
-
this.listData = value
|
|
112
|
-
},
|
|
113
|
-
deep: true
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
methods: {
|
|
117
|
-
fileCls(file) {
|
|
118
|
-
if (file === 'application/pdf') {
|
|
119
|
-
return [`${prefixCls}__preview--pdf`];
|
|
120
|
-
} else {
|
|
121
|
-
return [];
|
|
122
|
-
}
|
|
123
|
-
},
|
|
124
|
-
onDelete(e, item) {
|
|
125
|
-
e.stopPropagation()
|
|
126
|
-
const { disabled, beforeDelete, listData } = this
|
|
127
|
-
/**
|
|
128
|
-
* 判断是否允许删除文件
|
|
129
|
-
*/
|
|
130
|
-
if (!disabled && beforeDelete(item) !== false) {
|
|
131
|
-
/**
|
|
132
|
-
* 索引
|
|
133
|
-
*/
|
|
134
|
-
let i = 0
|
|
135
|
-
/**
|
|
136
|
-
* 循环遍历数组定位下标位置
|
|
137
|
-
*/
|
|
138
|
-
for (; i < listData.length; i++) {
|
|
139
|
-
/**
|
|
140
|
-
* 判断 id 是否相等
|
|
141
|
-
*/
|
|
142
|
-
if (listData[i].id === item.id) break
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* 删除
|
|
146
|
-
*/
|
|
147
|
-
listData.splice(i, 1)
|
|
148
|
-
this.$emit('input', listData)
|
|
149
|
-
this.$emit('change', listData)
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
onChange(e) {
|
|
153
|
-
const { beforeRead, afterRead, maxSize, maxCount, listData } = this
|
|
154
|
-
/**
|
|
155
|
-
* 获取不超过 maxCount 文件
|
|
156
|
-
*/
|
|
157
|
-
const files = Object.values(e.target.files).slice(0, maxCount)
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* 判断是否允许读取文件
|
|
161
|
-
*/
|
|
162
|
-
if (beforeRead(files) !== false) {
|
|
163
|
-
/**
|
|
164
|
-
* 循环遍历添加数据
|
|
165
|
-
*/
|
|
166
|
-
const arr = []
|
|
167
|
-
files.forEach(elem => {
|
|
168
|
-
/**
|
|
169
|
-
* 判断大小是否小于或等于 maxSize
|
|
170
|
-
*/
|
|
171
|
-
if (elem.size <= maxSize) {
|
|
172
|
-
/**
|
|
173
|
-
* 数组长度
|
|
174
|
-
*/
|
|
175
|
-
const len = listData.length
|
|
176
|
-
/**
|
|
177
|
-
* 获取 id
|
|
178
|
-
*/
|
|
179
|
-
const id = len === 0 ? 1 : listData[len - 1].id + 1
|
|
180
|
-
/**
|
|
181
|
-
* 创建 blob 预览图片地址
|
|
182
|
-
*/
|
|
183
|
-
const url = window.URL.createObjectURL(elem)
|
|
184
|
-
|
|
185
|
-
const type = e.target.files[0].type;
|
|
186
|
-
/**
|
|
187
|
-
* 添加进数组
|
|
188
|
-
*/
|
|
189
|
-
listData.push({ id, url, type })
|
|
190
|
-
arr.push(elem)
|
|
191
|
-
}
|
|
192
|
-
})
|
|
193
|
-
/**
|
|
194
|
-
* 符合规则的图片数组
|
|
195
|
-
*/
|
|
196
|
-
if (arr.length > 0) {
|
|
197
|
-
afterRead(arr)
|
|
198
|
-
this.$emit('change', listData)
|
|
199
|
-
this.$emit('num-changed', this.curNum);
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
onPreview({ id }) {
|
|
204
|
-
const { disabled, preview } = this
|
|
205
|
-
/**
|
|
206
|
-
* 判断是否允许预览
|
|
207
|
-
*/
|
|
208
|
-
if (!disabled && preview) {
|
|
209
|
-
this.curNum = id
|
|
210
|
-
/**
|
|
211
|
-
* 打开图片预览
|
|
212
|
-
*/
|
|
213
|
-
this.isPreview = true
|
|
214
|
-
}
|
|
215
|
-
},
|
|
216
|
-
closePreview() {
|
|
217
|
-
this.isPreview = false
|
|
218
|
-
},
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
</script>
|
|
222
|
-
|
|
223
|
-
<style lang="less">
|
|
224
|
-
@import './style.less';
|
|
225
|
-
</style>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|