c-image 1.0.1 → 1.0.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/lib/my-vue-library.es.js +178 -148
- package/lib/my-vue-library.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +37 -37
package/lib/my-vue-library.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { defineComponent as S, createElementBlock as
|
|
1
|
+
import { defineComponent as S, createElementBlock as m, openBlock as o, createElementVNode as s, resolveComponent as a, createBlock as B, toDisplayString as L, withCtx as n, createVNode as t, unref as z, ref as x, Fragment as A, createTextVNode as I, renderList as R, normalizeClass as T, normalizeStyle as P } from "vue";
|
|
2
2
|
/*! Element Plus Icons Vue v2.3.2 */
|
|
3
3
|
var X = /* @__PURE__ */ S({
|
|
4
4
|
name: "ArrowLeft",
|
|
5
5
|
__name: "arrow-left",
|
|
6
6
|
setup(e) {
|
|
7
|
-
return (
|
|
7
|
+
return (i, l) => (o(), m("svg", {
|
|
8
8
|
xmlns: "http://www.w3.org/2000/svg",
|
|
9
9
|
viewBox: "0 0 1024 1024"
|
|
10
10
|
}, [
|
|
11
|
-
|
|
11
|
+
s("path", {
|
|
12
12
|
fill: "currentColor",
|
|
13
13
|
d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"
|
|
14
14
|
})
|
|
@@ -18,11 +18,11 @@ var X = /* @__PURE__ */ S({
|
|
|
18
18
|
name: "ArrowRight",
|
|
19
19
|
__name: "arrow-right",
|
|
20
20
|
setup(e) {
|
|
21
|
-
return (
|
|
21
|
+
return (i, l) => (o(), m("svg", {
|
|
22
22
|
xmlns: "http://www.w3.org/2000/svg",
|
|
23
23
|
viewBox: "0 0 1024 1024"
|
|
24
24
|
}, [
|
|
25
|
-
|
|
25
|
+
s("path", {
|
|
26
26
|
fill: "currentColor",
|
|
27
27
|
d: "M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"
|
|
28
28
|
})
|
|
@@ -32,75 +32,78 @@ var X = /* @__PURE__ */ S({
|
|
|
32
32
|
name: "Picture",
|
|
33
33
|
__name: "picture",
|
|
34
34
|
setup(e) {
|
|
35
|
-
return (
|
|
35
|
+
return (i, l) => (o(), m("svg", {
|
|
36
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
37
|
viewBox: "0 0 1024 1024"
|
|
38
38
|
}, [
|
|
39
|
-
|
|
39
|
+
s("path", {
|
|
40
40
|
fill: "currentColor",
|
|
41
41
|
d: "M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"
|
|
42
42
|
}),
|
|
43
|
-
|
|
43
|
+
s("path", {
|
|
44
44
|
fill: "currentColor",
|
|
45
45
|
d: "M384 288q64 0 64 64t-64 64-64-64 64-64M185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952z"
|
|
46
46
|
})
|
|
47
47
|
]));
|
|
48
48
|
}
|
|
49
49
|
}), M = U;
|
|
50
|
-
const
|
|
50
|
+
const k = (e, i) => {
|
|
51
51
|
const l = e.__vccOpts || e;
|
|
52
|
-
for (const [
|
|
53
|
-
l[
|
|
52
|
+
for (const [u, r] of i)
|
|
53
|
+
l[u] = r;
|
|
54
54
|
return l;
|
|
55
|
-
}, W = { class: "wrap" }, G = { class: "name" }, J = { class: "flex justify-center items-center h-full" }, K = {
|
|
55
|
+
}, W = { class: "wrap" }, G = { class: "name" }, J = { class: "flex justify-center items-center h-full" }, K = { style: { color: "#000000" } }, Q = {
|
|
56
56
|
key: 1,
|
|
57
57
|
class: "flex justify-center items-center h-full"
|
|
58
|
-
},
|
|
58
|
+
}, Y = {
|
|
59
59
|
__name: "cImageItem",
|
|
60
60
|
props: {
|
|
61
61
|
curImageIndex: { type: Number, default: 0 },
|
|
62
62
|
fit: { type: String, default: "contain" },
|
|
63
63
|
imgList: { type: Array, default: () => [] },
|
|
64
|
-
show: { type: Boolean, default: !0 }
|
|
64
|
+
show: { type: Boolean, default: !0 },
|
|
65
|
+
zIndex: { type: Number, default: 9999 }
|
|
65
66
|
},
|
|
66
67
|
setup(e) {
|
|
67
|
-
const
|
|
68
|
+
const i = {
|
|
68
69
|
0: "融合智能识别",
|
|
69
70
|
1: "声迅智能识别",
|
|
70
71
|
2: "海康智能识别",
|
|
71
72
|
3: "讯飞智能识别"
|
|
72
73
|
};
|
|
73
|
-
return (l,
|
|
74
|
-
const
|
|
75
|
-
return
|
|
76
|
-
|
|
77
|
-
e.show ? (
|
|
74
|
+
return (l, u) => {
|
|
75
|
+
const r = a("el-icon"), c = a("el-image");
|
|
76
|
+
return o(), m("div", W, [
|
|
77
|
+
s("div", G, L(i[e.curImageIndex]), 1),
|
|
78
|
+
e.show ? (o(), B(c, {
|
|
78
79
|
key: 0,
|
|
79
80
|
class: "image-item",
|
|
80
81
|
src: e.imgList[e.curImageIndex].url,
|
|
81
82
|
fit: e.fit,
|
|
82
|
-
"preview-src-list": e.imgList.map((
|
|
83
|
+
"preview-src-list": e.imgList.map((_) => _.url),
|
|
83
84
|
"initial-index": e.curImageIndex,
|
|
84
|
-
"show-progress": ""
|
|
85
|
+
"show-progress": "",
|
|
86
|
+
"preview-teleported": !0,
|
|
87
|
+
"z-index": e.zIndex
|
|
85
88
|
}, {
|
|
86
|
-
error:
|
|
87
|
-
|
|
88
|
-
t(
|
|
89
|
-
default:
|
|
90
|
-
t(
|
|
89
|
+
error: n(() => [
|
|
90
|
+
s("div", J, [
|
|
91
|
+
t(r, null, {
|
|
92
|
+
default: n(() => [
|
|
93
|
+
t(z(M))
|
|
91
94
|
]),
|
|
92
95
|
_: 1
|
|
93
96
|
})
|
|
94
97
|
])
|
|
95
98
|
]),
|
|
96
|
-
progress:
|
|
97
|
-
|
|
99
|
+
progress: n(({ activeIndex: _ }) => [
|
|
100
|
+
s("span", K, L(_ + 1 + "-" + i[_]), 1)
|
|
98
101
|
]),
|
|
99
102
|
_: 1
|
|
100
|
-
}, 8, ["src", "fit", "preview-src-list", "initial-index"])) : (
|
|
101
|
-
t(
|
|
102
|
-
default:
|
|
103
|
-
t(
|
|
103
|
+
}, 8, ["src", "fit", "preview-src-list", "initial-index", "z-index"])) : (o(), m("div", Q, [
|
|
104
|
+
t(r, null, {
|
|
105
|
+
default: n(() => [
|
|
106
|
+
t(z(M))
|
|
104
107
|
]),
|
|
105
108
|
_: 1
|
|
106
109
|
})
|
|
@@ -108,7 +111,7 @@ const x = (e, a) => {
|
|
|
108
111
|
]);
|
|
109
112
|
};
|
|
110
113
|
}
|
|
111
|
-
},
|
|
114
|
+
}, $ = /* @__PURE__ */ k(Y, [["__scopeId", "data-v-567f63a7"]]), Z = { class: "image-box" }, ee = {
|
|
112
115
|
__name: "cImageBox",
|
|
113
116
|
props: {
|
|
114
117
|
images: {
|
|
@@ -121,21 +124,21 @@ const x = (e, a) => {
|
|
|
121
124
|
}
|
|
122
125
|
},
|
|
123
126
|
setup(e) {
|
|
124
|
-
return (
|
|
125
|
-
const
|
|
126
|
-
return
|
|
127
|
-
e.images.length ? (
|
|
127
|
+
return (i, l) => {
|
|
128
|
+
const u = a("el-col"), r = a("el-row"), c = a("el-empty");
|
|
129
|
+
return o(), m("div", Z, [
|
|
130
|
+
e.images.length ? (o(), B(r, {
|
|
128
131
|
key: 0,
|
|
129
132
|
gutter: 10,
|
|
130
133
|
class: "content"
|
|
131
134
|
}, {
|
|
132
|
-
default:
|
|
133
|
-
t(
|
|
135
|
+
default: n(() => [
|
|
136
|
+
t(u, {
|
|
134
137
|
span: 16,
|
|
135
138
|
class: "left"
|
|
136
139
|
}, {
|
|
137
|
-
default:
|
|
138
|
-
t(
|
|
140
|
+
default: n(() => [
|
|
141
|
+
t($, {
|
|
139
142
|
"img-list": e.images,
|
|
140
143
|
"cur-image-index": 0,
|
|
141
144
|
show: e.typeList.includes(0)
|
|
@@ -143,24 +146,24 @@ const x = (e, a) => {
|
|
|
143
146
|
]),
|
|
144
147
|
_: 1
|
|
145
148
|
}),
|
|
146
|
-
t(
|
|
149
|
+
t(u, {
|
|
147
150
|
span: 8,
|
|
148
151
|
class: "right"
|
|
149
152
|
}, {
|
|
150
|
-
default:
|
|
151
|
-
t(
|
|
153
|
+
default: n(() => [
|
|
154
|
+
t($, {
|
|
152
155
|
"img-list": e.images,
|
|
153
156
|
"cur-image-index": 1,
|
|
154
157
|
show: e.typeList.includes(1),
|
|
155
158
|
class: "item"
|
|
156
159
|
}, null, 8, ["img-list", "show"]),
|
|
157
|
-
t(
|
|
160
|
+
t($, {
|
|
158
161
|
"img-list": e.images,
|
|
159
162
|
"cur-image-index": 2,
|
|
160
163
|
show: e.typeList.includes(2),
|
|
161
164
|
class: "item"
|
|
162
165
|
}, null, 8, ["img-list", "show"]),
|
|
163
|
-
t(
|
|
166
|
+
t($, {
|
|
164
167
|
"img-list": e.images,
|
|
165
168
|
"cur-image-index": 3,
|
|
166
169
|
show: e.typeList.includes(3),
|
|
@@ -171,16 +174,16 @@ const x = (e, a) => {
|
|
|
171
174
|
})
|
|
172
175
|
]),
|
|
173
176
|
_: 1
|
|
174
|
-
})) : (
|
|
175
|
-
description:
|
|
176
|
-
|
|
177
|
+
})) : (o(), B(c, { key: 1 }, {
|
|
178
|
+
description: n(() => l[0] || (l[0] = [
|
|
179
|
+
s("div", null, "点击列表图片查看", -1)
|
|
177
180
|
])),
|
|
178
181
|
_: 1
|
|
179
182
|
}))
|
|
180
183
|
]);
|
|
181
184
|
};
|
|
182
185
|
}
|
|
183
|
-
},
|
|
186
|
+
}, D = /* @__PURE__ */ k(ee, [["__scopeId", "data-v-28f92729"]]), te = { class: "container" }, ne = { class: "wrapper" }, le = ["onClick"], oe = ["src", "alt"], se = { class: "title" }, ae = { class: "image-container" }, N = 240, ie = {
|
|
184
187
|
__name: "cImage",
|
|
185
188
|
props: {
|
|
186
189
|
imageList: {
|
|
@@ -189,62 +192,62 @@ const x = (e, a) => {
|
|
|
189
192
|
}
|
|
190
193
|
},
|
|
191
194
|
setup(e) {
|
|
192
|
-
const
|
|
195
|
+
const i = e, l = x([0, 1, 2, 3]), u = x([]), r = x(-1), c = {
|
|
193
196
|
0: "融合智能识别",
|
|
194
197
|
1: "声迅智能识别",
|
|
195
198
|
2: "海康智能识别",
|
|
196
199
|
3: "讯飞智能识别"
|
|
197
|
-
},
|
|
198
|
-
|
|
199
|
-
const { items: d } =
|
|
200
|
-
|
|
201
|
-
...
|
|
202
|
-
name:
|
|
200
|
+
}, _ = x(null), f = (y) => {
|
|
201
|
+
r.value = y;
|
|
202
|
+
const { items: d } = i.imageList[y];
|
|
203
|
+
u.value = d.map((v) => ({
|
|
204
|
+
...v,
|
|
205
|
+
name: c[v.type]
|
|
203
206
|
}));
|
|
204
207
|
};
|
|
205
|
-
let
|
|
206
|
-
const
|
|
207
|
-
|
|
208
|
-
},
|
|
209
|
-
|
|
208
|
+
let p = 0, h = 0;
|
|
209
|
+
const g = () => {
|
|
210
|
+
h !== i.imageList.length && (h++, p -= N, _.value.style.transform = `translateX(${p}px)`);
|
|
211
|
+
}, w = () => {
|
|
212
|
+
h !== 0 && (h--, p += N, _.value.style.transform = `translateX(${p}px)`);
|
|
210
213
|
};
|
|
211
|
-
return (
|
|
212
|
-
const
|
|
213
|
-
return
|
|
214
|
+
return (y, d) => {
|
|
215
|
+
const v = a("el-checkbox"), F = a("el-checkbox-group"), j = a("el-form-item"), E = a("el-form"), V = a("el-button");
|
|
216
|
+
return o(), m(A, null, [
|
|
214
217
|
t(E, { ref: "form" }, {
|
|
215
|
-
default:
|
|
216
|
-
t(
|
|
217
|
-
default:
|
|
218
|
-
t(
|
|
218
|
+
default: n(() => [
|
|
219
|
+
t(j, { label: "智能结果展示" }, {
|
|
220
|
+
default: n(() => [
|
|
221
|
+
t(F, {
|
|
219
222
|
modelValue: l.value,
|
|
220
|
-
"onUpdate:modelValue": d[0] || (d[0] = (
|
|
223
|
+
"onUpdate:modelValue": d[0] || (d[0] = (C) => l.value = C),
|
|
221
224
|
min: 1
|
|
222
225
|
}, {
|
|
223
|
-
default:
|
|
224
|
-
t(
|
|
225
|
-
default:
|
|
226
|
-
|
|
226
|
+
default: n(() => [
|
|
227
|
+
t(v, { label: 0 }, {
|
|
228
|
+
default: n(() => d[1] || (d[1] = [
|
|
229
|
+
I("融合智能识别")
|
|
227
230
|
])),
|
|
228
231
|
_: 1,
|
|
229
232
|
__: [1]
|
|
230
233
|
}),
|
|
231
|
-
t(
|
|
232
|
-
default:
|
|
233
|
-
|
|
234
|
+
t(v, { label: 1 }, {
|
|
235
|
+
default: n(() => d[2] || (d[2] = [
|
|
236
|
+
I("声迅智能识别")
|
|
234
237
|
])),
|
|
235
238
|
_: 1,
|
|
236
239
|
__: [2]
|
|
237
240
|
}),
|
|
238
|
-
t(
|
|
239
|
-
default:
|
|
240
|
-
|
|
241
|
+
t(v, { label: 2 }, {
|
|
242
|
+
default: n(() => d[3] || (d[3] = [
|
|
243
|
+
I("海康智能识别")
|
|
241
244
|
])),
|
|
242
245
|
_: 1,
|
|
243
246
|
__: [3]
|
|
244
247
|
}),
|
|
245
|
-
t(
|
|
246
|
-
default:
|
|
247
|
-
|
|
248
|
+
t(v, { label: 3 }, {
|
|
249
|
+
default: n(() => d[4] || (d[4] = [
|
|
250
|
+
I("讯飞智能识别")
|
|
248
251
|
])),
|
|
249
252
|
_: 1,
|
|
250
253
|
__: [4]
|
|
@@ -258,50 +261,50 @@ const x = (e, a) => {
|
|
|
258
261
|
]),
|
|
259
262
|
_: 1
|
|
260
263
|
}, 512),
|
|
261
|
-
|
|
262
|
-
t(
|
|
264
|
+
s("div", te, [
|
|
265
|
+
t(V, {
|
|
263
266
|
class: "arrow-button",
|
|
264
|
-
icon:
|
|
267
|
+
icon: z(q),
|
|
265
268
|
circle: "",
|
|
266
|
-
onClick:
|
|
269
|
+
onClick: g
|
|
267
270
|
}, null, 8, ["icon"]),
|
|
268
|
-
|
|
269
|
-
|
|
271
|
+
s("div", ne, [
|
|
272
|
+
s("div", {
|
|
270
273
|
ref_key: "navRef",
|
|
271
|
-
ref:
|
|
274
|
+
ref: _,
|
|
272
275
|
class: "nav"
|
|
273
276
|
}, [
|
|
274
|
-
(
|
|
275
|
-
key:
|
|
276
|
-
class: T(["item", { active:
|
|
277
|
-
onClick: (
|
|
277
|
+
(o(!0), m(A, null, R(e.imageList, (C, b) => (o(), m("div", {
|
|
278
|
+
key: b,
|
|
279
|
+
class: T(["item", { active: r.value === b }]),
|
|
280
|
+
onClick: (fe) => f(b)
|
|
278
281
|
}, [
|
|
279
|
-
|
|
280
|
-
src:
|
|
281
|
-
alt: `缩略图 ${
|
|
282
|
+
s("img", {
|
|
283
|
+
src: C.items[0].url,
|
|
284
|
+
alt: `缩略图 ${b + 1}`,
|
|
282
285
|
style: { "object-fit": "contain" }
|
|
283
|
-
}, null, 8,
|
|
284
|
-
|
|
286
|
+
}, null, 8, oe),
|
|
287
|
+
s("span", se, L(c[C.items[0].type]), 1)
|
|
285
288
|
], 10, le))), 128))
|
|
286
289
|
], 512)
|
|
287
290
|
]),
|
|
288
|
-
t(
|
|
291
|
+
t(V, {
|
|
289
292
|
class: "arrow-button",
|
|
290
|
-
icon:
|
|
293
|
+
icon: z(O),
|
|
291
294
|
circle: "",
|
|
292
|
-
onClick:
|
|
295
|
+
onClick: w
|
|
293
296
|
}, null, 8, ["icon"])
|
|
294
297
|
]),
|
|
295
|
-
|
|
296
|
-
t(
|
|
297
|
-
images:
|
|
298
|
+
s("div", ae, [
|
|
299
|
+
t(D, {
|
|
300
|
+
images: u.value,
|
|
298
301
|
"type-list": l.value
|
|
299
302
|
}, null, 8, ["images", "type-list"])
|
|
300
303
|
])
|
|
301
304
|
], 64);
|
|
302
305
|
};
|
|
303
306
|
}
|
|
304
|
-
},
|
|
307
|
+
}, ce = /* @__PURE__ */ k(ie, [["__scopeId", "data-v-6692b78c"]]), re = { class: "info" }, me = { class: "info" }, ue = {
|
|
305
308
|
__name: "cImageList",
|
|
306
309
|
props: {
|
|
307
310
|
imageList: {
|
|
@@ -318,39 +321,57 @@ const x = (e, a) => {
|
|
|
318
321
|
}
|
|
319
322
|
},
|
|
320
323
|
emits: ["downFile", "showDetail"],
|
|
321
|
-
setup(e, { emit:
|
|
322
|
-
const l =
|
|
323
|
-
l("downFile",
|
|
324
|
-
},
|
|
325
|
-
l("showDetail",
|
|
324
|
+
setup(e, { emit: i }) {
|
|
325
|
+
const l = i, u = (c) => {
|
|
326
|
+
l("downFile", c);
|
|
327
|
+
}, r = (c) => {
|
|
328
|
+
l("showDetail", c);
|
|
326
329
|
};
|
|
327
|
-
return (
|
|
328
|
-
const
|
|
329
|
-
return
|
|
330
|
-
key:
|
|
330
|
+
return (c, _) => {
|
|
331
|
+
const f = a("el-image"), p = a("el-tooltip"), h = a("el-button");
|
|
332
|
+
return o(!0), m(A, null, R(e.imageList, (g, w) => (o(), m("div", {
|
|
333
|
+
key: w,
|
|
331
334
|
class: "img-item",
|
|
332
|
-
style:
|
|
335
|
+
style: P({ width: 100 / e.countPerRow + "%" })
|
|
333
336
|
}, [
|
|
334
|
-
t(
|
|
335
|
-
src:
|
|
337
|
+
t(f, {
|
|
338
|
+
src: g.srcList[0],
|
|
336
339
|
style: { height: "300px", width: "240px" },
|
|
337
340
|
"zoom-rate": 1.2,
|
|
338
341
|
"max-scale": 7,
|
|
339
342
|
"min-scale": 0.2,
|
|
340
343
|
"show-progress": "",
|
|
341
|
-
"initial-index":
|
|
344
|
+
"initial-index": w,
|
|
342
345
|
fit: "contain",
|
|
343
|
-
onClick: (
|
|
346
|
+
onClick: (y) => r(g)
|
|
344
347
|
}, null, 8, ["src", "initial-index", "onClick"]),
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
+
t(p, {
|
|
349
|
+
effect: "light",
|
|
350
|
+
content: g.time,
|
|
351
|
+
placement: "top"
|
|
352
|
+
}, {
|
|
353
|
+
default: n(() => [
|
|
354
|
+
s("span", re, L(g.time), 1)
|
|
355
|
+
]),
|
|
356
|
+
_: 2
|
|
357
|
+
}, 1032, ["content"]),
|
|
358
|
+
t(p, {
|
|
359
|
+
effect: "light",
|
|
360
|
+
content: g.name,
|
|
361
|
+
placement: "top"
|
|
362
|
+
}, {
|
|
363
|
+
default: n(() => [
|
|
364
|
+
s("span", me, L(g.name), 1)
|
|
365
|
+
]),
|
|
366
|
+
_: 2
|
|
367
|
+
}, 1032, ["content"]),
|
|
368
|
+
t(h, {
|
|
348
369
|
type: "primary",
|
|
349
370
|
size: "small",
|
|
350
|
-
onClick: (
|
|
371
|
+
onClick: (y) => u(g)
|
|
351
372
|
}, {
|
|
352
|
-
default:
|
|
353
|
-
|
|
373
|
+
default: n(() => _[0] || (_[0] = [
|
|
374
|
+
I("下载")
|
|
354
375
|
])),
|
|
355
376
|
_: 2,
|
|
356
377
|
__: [0]
|
|
@@ -358,7 +379,7 @@ const x = (e, a) => {
|
|
|
358
379
|
], 4))), 128);
|
|
359
380
|
};
|
|
360
381
|
}
|
|
361
|
-
},
|
|
382
|
+
}, _e = /* @__PURE__ */ k(ue, [["__scopeId", "data-v-76897c2d"]]), de = {
|
|
362
383
|
__name: "cImageScroll",
|
|
363
384
|
props: {
|
|
364
385
|
imageList: {
|
|
@@ -368,47 +389,56 @@ const x = (e, a) => {
|
|
|
368
389
|
scrollBg: {
|
|
369
390
|
type: String,
|
|
370
391
|
default: "#ffffff"
|
|
392
|
+
},
|
|
393
|
+
indicatorPosition: {
|
|
394
|
+
type: String,
|
|
395
|
+
default: "none"
|
|
371
396
|
}
|
|
372
397
|
},
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
|
|
398
|
+
emits: ["change"],
|
|
399
|
+
setup(e, { expose: i, emit: l }) {
|
|
400
|
+
const u = l, r = (f) => {
|
|
401
|
+
u("change", f);
|
|
402
|
+
}, c = x(null);
|
|
403
|
+
return i({ setActive: (f) => {
|
|
404
|
+
c.value.setActiveItem(f);
|
|
405
|
+
} }), (f, p) => {
|
|
406
|
+
const h = a("CImageBox"), g = a("el-carousel-item"), w = a("el-carousel");
|
|
407
|
+
return o(), m("div", {
|
|
380
408
|
class: "c-image-scroll",
|
|
381
|
-
style:
|
|
409
|
+
style: P({ background: e.scrollBg })
|
|
382
410
|
}, [
|
|
383
|
-
t(
|
|
411
|
+
t(w, {
|
|
384
412
|
ref_key: "carouselRef",
|
|
385
|
-
ref:
|
|
413
|
+
ref: c,
|
|
386
414
|
arrow: "always",
|
|
387
415
|
trigger: "click",
|
|
388
416
|
autoplay: !1,
|
|
389
417
|
height: "100%",
|
|
390
|
-
style: { height: "100%" }
|
|
418
|
+
style: { height: "100%" },
|
|
419
|
+
"indicator-position": e.indicatorPosition,
|
|
420
|
+
onChange: r
|
|
391
421
|
}, {
|
|
392
|
-
default:
|
|
393
|
-
(
|
|
394
|
-
default:
|
|
395
|
-
t(
|
|
396
|
-
images:
|
|
422
|
+
default: n(() => [
|
|
423
|
+
(o(!0), m(A, null, R(e.imageList, (y) => (o(), B(g, { key: y }, {
|
|
424
|
+
default: n(() => [
|
|
425
|
+
t(h, {
|
|
426
|
+
images: y.items
|
|
397
427
|
}, null, 8, ["images"])
|
|
398
428
|
]),
|
|
399
429
|
_: 2
|
|
400
430
|
}, 1024))), 128))
|
|
401
431
|
]),
|
|
402
432
|
_: 1
|
|
403
|
-
},
|
|
433
|
+
}, 8, ["indicator-position"])
|
|
404
434
|
], 4);
|
|
405
435
|
};
|
|
406
436
|
}
|
|
407
|
-
},
|
|
437
|
+
}, ge = /* @__PURE__ */ k(de, [["__scopeId", "data-v-5a8f0d41"]]), he = {
|
|
408
438
|
install(e) {
|
|
409
|
-
e.component("CImage",
|
|
439
|
+
e.component("CImage", ce).component("CImageBox", D).component("CImageList", _e).component("CImageScroll", ge);
|
|
410
440
|
}
|
|
411
441
|
};
|
|
412
442
|
export {
|
|
413
|
-
|
|
443
|
+
he as default
|
|
414
444
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,
|
|
1
|
+
(function(e,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(e=typeof globalThis<"u"?globalThis:e||self,e.MyVueLibrary=h(e.Vue))})(this,function(e){"use strict";/*! Element Plus Icons Vue v2.3.2 */var h=e.defineComponent({name:"ArrowLeft",__name:"arrow-left",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"})]))}}),I=h,L=e.defineComponent({name:"ArrowRight",__name:"arrow-right",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"})]))}}),E=L,u=e.defineComponent({name:"Picture",__name:"picture",setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"}),e.createElementVNode("path",{fill:"currentColor",d:"M384 288q64 0 64 64t-64 64-64-64 64-64M185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952z"})]))}}),k=u;const w=(t,n)=>{const o=t.__vccOpts||t;for(const[a,c]of n)o[a]=c;return o},b={class:"wrap"},$={class:"name"},S={class:"flex justify-center items-center h-full"},z={style:{color:"#000000"}},A={key:1,class:"flex justify-center items-center h-full"},x=w({__name:"cImageItem",props:{curImageIndex:{type:Number,default:0},fit:{type:String,default:"contain"},imgList:{type:Array,default:()=>[]},show:{type:Boolean,default:!0},zIndex:{type:Number,default:9999}},setup(t){const n={0:"融合智能识别",1:"声迅智能识别",2:"海康智能识别",3:"讯飞智能识别"};return(o,a)=>{const c=e.resolveComponent("el-icon"),l=e.resolveComponent("el-image");return e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",$,e.toDisplayString(n[t.curImageIndex]),1),t.show?(e.openBlock(),e.createBlock(l,{key:0,class:"image-item",src:t.imgList[t.curImageIndex].url,fit:t.fit,"preview-src-list":t.imgList.map(s=>s.url),"initial-index":t.curImageIndex,"show-progress":"","preview-teleported":!0,"z-index":t.zIndex},{error:e.withCtx(()=>[e.createElementVNode("div",S,[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(k))]),_:1})])]),progress:e.withCtx(({activeIndex:s})=>[e.createElementVNode("span",z,e.toDisplayString(s+1+"-"+n[s]),1)]),_:1},8,["src","fit","preview-src-list","initial-index","z-index"])):(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(c,null,{default:e.withCtx(()=>[e.createVNode(e.unref(k))]),_:1})]))])}}},[["__scopeId","data-v-567f63a7"]]),D={class:"image-box"},V=w({__name:"cImageBox",props:{images:{type:Array,default:()=>[]},typeList:{type:Array,default:()=>[0,1,2,3]}},setup(t){return(n,o)=>{const a=e.resolveComponent("el-col"),c=e.resolveComponent("el-row"),l=e.resolveComponent("el-empty");return e.openBlock(),e.createElementBlock("div",D,[t.images.length?(e.openBlock(),e.createBlock(c,{key:0,gutter:10,class:"content"},{default:e.withCtx(()=>[e.createVNode(a,{span:16,class:"left"},{default:e.withCtx(()=>[e.createVNode(x,{"img-list":t.images,"cur-image-index":0,show:t.typeList.includes(0)},null,8,["img-list","show"])]),_:1}),e.createVNode(a,{span:8,class:"right"},{default:e.withCtx(()=>[e.createVNode(x,{"img-list":t.images,"cur-image-index":1,show:t.typeList.includes(1),class:"item"},null,8,["img-list","show"]),e.createVNode(x,{"img-list":t.images,"cur-image-index":2,show:t.typeList.includes(2),class:"item"},null,8,["img-list","show"]),e.createVNode(x,{"img-list":t.images,"cur-image-index":3,show:t.typeList.includes(3),class:"item"},null,8,["img-list","show"])]),_:1})]),_:1})):(e.openBlock(),e.createBlock(l,{key:1},{description:e.withCtx(()=>o[0]||(o[0]=[e.createElementVNode("div",null,"点击列表图片查看",-1)])),_:1}))])}}},[["__scopeId","data-v-28f92729"]]),M={class:"container"},R={class:"wrapper"},T=["onClick"],F=["src","alt"],P={class:"title"},j={class:"image-container"},N=240,q=w({__name:"cImage",props:{imageList:{type:Array,default:()=>[]}},setup(t){const n=t,o=e.ref([0,1,2,3]),a=e.ref([]),c=e.ref(-1),l={0:"融合智能识别",1:"声迅智能识别",2:"海康智能识别",3:"讯飞智能识别"},s=e.ref(null),m=p=>{c.value=p;const{items:i}=n.imageList[p];a.value=i.map(f=>({...f,name:l[f.type]}))};let d=0,_=0;const r=()=>{_!==n.imageList.length&&(_++,d-=N,s.value.style.transform=`translateX(${d}px)`)},g=()=>{_!==0&&(_--,d+=N,s.value.style.transform=`translateX(${d}px)`)};return(p,i)=>{const f=e.resolveComponent("el-checkbox"),W=e.resolveComponent("el-checkbox-group"),G=e.resolveComponent("el-form-item"),J=e.resolveComponent("el-form"),B=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(J,{ref:"form"},{default:e.withCtx(()=>[e.createVNode(G,{label:"智能结果展示"},{default:e.withCtx(()=>[e.createVNode(W,{modelValue:o.value,"onUpdate:modelValue":i[0]||(i[0]=y=>o.value=y),min:1},{default:e.withCtx(()=>[e.createVNode(f,{label:0},{default:e.withCtx(()=>i[1]||(i[1]=[e.createTextVNode("融合智能识别")])),_:1,__:[1]}),e.createVNode(f,{label:1},{default:e.withCtx(()=>i[2]||(i[2]=[e.createTextVNode("声迅智能识别")])),_:1,__:[2]}),e.createVNode(f,{label:2},{default:e.withCtx(()=>i[3]||(i[3]=[e.createTextVNode("海康智能识别")])),_:1,__:[3]}),e.createVNode(f,{label:3},{default:e.withCtx(()=>i[4]||(i[4]=[e.createTextVNode("讯飞智能识别")])),_:1,__:[4]})]),_:1},8,["modelValue"])]),_:1})]),_:1},512),e.createElementVNode("div",M,[e.createVNode(B,{class:"arrow-button",icon:e.unref(I),circle:"",onClick:r},null,8,["icon"]),e.createElementVNode("div",R,[e.createElementVNode("div",{ref_key:"navRef",ref:s,class:"nav"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,(y,C)=>(e.openBlock(),e.createElementBlock("div",{key:C,class:e.normalizeClass(["item",{active:c.value===C}]),onClick:te=>m(C)},[e.createElementVNode("img",{src:y.items[0].url,alt:`缩略图 ${C+1}`,style:{"object-fit":"contain"}},null,8,F),e.createElementVNode("span",P,e.toDisplayString(l[y.items[0].type]),1)],10,T))),128))],512)]),e.createVNode(B,{class:"arrow-button",icon:e.unref(E),circle:"",onClick:g},null,8,["icon"])]),e.createElementVNode("div",j,[e.createVNode(V,{images:a.value,"type-list":o.value},null,8,["images","type-list"])])],64)}}},[["__scopeId","data-v-6692b78c"]]),X={class:"info"},H={class:"info"},O=w({__name:"cImageList",props:{imageList:{type:Array,default:()=>[]},width:{type:String,default:"800px"},countPerRow:{type:Number,default:5}},emits:["downFile","showDetail"],setup(t,{emit:n}){const o=n,a=l=>{o("downFile",l)},c=l=>{o("showDetail",l)};return(l,s)=>{const m=e.resolveComponent("el-image"),d=e.resolveComponent("el-tooltip"),_=e.resolveComponent("el-button");return e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,(r,g)=>(e.openBlock(),e.createElementBlock("div",{key:g,class:"img-item",style:e.normalizeStyle({width:100/t.countPerRow+"%"})},[e.createVNode(m,{src:r.srcList[0],style:{height:"300px",width:"240px"},"zoom-rate":1.2,"max-scale":7,"min-scale":.2,"show-progress":"","initial-index":g,fit:"contain",onClick:p=>c(r)},null,8,["src","initial-index","onClick"]),e.createVNode(d,{effect:"light",content:r.time,placement:"top"},{default:e.withCtx(()=>[e.createElementVNode("span",X,e.toDisplayString(r.time),1)]),_:2},1032,["content"]),e.createVNode(d,{effect:"light",content:r.name,placement:"top"},{default:e.withCtx(()=>[e.createElementVNode("span",H,e.toDisplayString(r.name),1)]),_:2},1032,["content"]),e.createVNode(_,{type:"primary",size:"small",onClick:p=>a(r)},{default:e.withCtx(()=>s[0]||(s[0]=[e.createTextVNode("下载")])),_:2,__:[0]},1032,["onClick"])],4))),128)}}},[["__scopeId","data-v-76897c2d"]]),U=w({__name:"cImageScroll",props:{imageList:{type:Array,default:()=>[]},scrollBg:{type:String,default:"#ffffff"},indicatorPosition:{type:String,default:"none"}},emits:["change"],setup(t,{expose:n,emit:o}){const a=o,c=m=>{a("change",m)},l=e.ref(null);return n({setActive:m=>{l.value.setActiveItem(m)}}),(m,d)=>{const _=e.resolveComponent("CImageBox"),r=e.resolveComponent("el-carousel-item"),g=e.resolveComponent("el-carousel");return e.openBlock(),e.createElementBlock("div",{class:"c-image-scroll",style:e.normalizeStyle({background:t.scrollBg})},[e.createVNode(g,{ref_key:"carouselRef",ref:l,arrow:"always",trigger:"click",autoplay:!1,height:"100%",style:{height:"100%"},"indicator-position":t.indicatorPosition,onChange:c},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.imageList,p=>(e.openBlock(),e.createBlock(r,{key:p},{default:e.withCtx(()=>[e.createVNode(_,{images:p.items},null,8,["images"])]),_:2},1024))),128))]),_:1},8,["indicator-position"])],4)}}},[["__scopeId","data-v-5a8f0d41"]]);return{install(t){t.component("CImage",q).component("CImageBox",V).component("CImageList",O).component("CImageScroll",U)}}});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.wrap[data-v-
|
|
1
|
+
@charset "UTF-8";.wrap[data-v-567f63a7]{width:100%;height:100%;position:relative;border:1px solid #eee}.wrap .name[data-v-567f63a7]{position:absolute;top:20px;left:20px;z-index:1;padding:5px;font-size:16px}.wrap .image-item[data-v-567f63a7]{width:100%;height:100%}.wrap .preview-name[data-v-567f63a7]{position:absolute;top:20px;left:20px;z-index:1;padding:5px;font-size:16px}.image-box[data-v-28f92729]{width:100%;height:100%;position:relative;overflow-y:auto}.image-box .content[data-v-28f92729]{width:100%;height:100%;height:calc(100% - 5px)}.image-box .content .left[data-v-28f92729],.image-box .content .right[data-v-28f92729]{height:100%;display:flex;flex-direction:column}.image-box .content .left .item[data-v-28f92729],.image-box .content .right .item[data-v-28f92729]{flex:1;overflow:hidden}.empty-state[data-v-28f92729]{padding:40px 0;text-align:center;color:#999;border:1px dashed #ddd;border-radius:8px;margin-top:15px}.image-container[data-v-6692b78c]{height:100%;position:relative;overflow-y:auto}.container[data-v-6692b78c]{width:100%;margin-top:10px;padding:5px 0;display:flex;align-items:center;gap:8px}.container .wrapper[data-v-6692b78c]{flex:1;display:flex;overflow-x:auto}.container .wrapper .nav[data-v-6692b78c]{display:flex;gap:10px}.item[data-v-6692b78c]{position:relative;width:240px;height:160px;flex-shrink:0;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.7;transition:all .3s;box-sizing:border-box;border:2px solid #e0e0e0}.item.active[data-v-6692b78c]{opacity:1;border:2px solid #2196f3}.item .title[data-v-6692b78c]{position:absolute;right:5px;top:5px;font-size:12px;color:#666}.item img[data-v-6692b78c]{width:100%;height:100%;object-fit:cover;display:block;text-align:center;line-height:9}.nav[data-v-6692b78c]::-webkit-scrollbar{display:none}.nav[data-v-6692b78c]{-ms-overflow-style:none;scrollbar-width:none}.nav[data-v-6692b78c]:before,.nav[data-v-6692b78c]:after{content:"";position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:1}.nav[data-v-6692b78c]:before{left:0;background:linear-gradient(to right,#fff,transparent)}.nav[data-v-6692b78c]:after{right:0;background:linear-gradient(to left,#fff,transparent)}.info-meta p[data-v-6692b78c]{margin-bottom:10px;color:#666;font-size:14px;display:flex}.info-meta span[data-v-6692b78c]{width:80px;color:#999}@keyframes fadeInUp-6692b78c{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.container[data-v-6692b78c]{height:100px}}.icon-plus[data-v-6692b78c]:before{content:"+";font-weight:700}.img-item[data-v-76897c2d]{position:relative;display:flex;flex-direction:column;align-items:center}.img-item[data-v-76897c2d] .el-image{cursor:pointer}.img-item .info[data-v-76897c2d]{width:240px;line-height:25px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.img-item .big-img-wrap[data-v-76897c2d]{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080}.c-image-scroll[data-v-5a8f0d41]{width:100%;height:100%}
|
package/package.json
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "c-image",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"author": "",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"description": "封装vue3组件库",
|
|
8
|
-
"keywords": [
|
|
9
|
-
"vue3",
|
|
10
|
-
"封装组件库"
|
|
11
|
-
],
|
|
12
|
-
"main": "lib/my-vue-library.es.js",
|
|
13
|
-
"scripts": {
|
|
14
|
-
"dev": "vite",
|
|
15
|
-
"build": "vite build",
|
|
16
|
-
"preview": "vite preview",
|
|
17
|
-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
|
18
|
-
"format": "prettier --write src/"
|
|
19
|
-
},
|
|
20
|
-
"dependencies": {
|
|
21
|
-
"@element-plus/icons-vue": "^2.3.2",
|
|
22
|
-
"element-plus": "^2.11.4",
|
|
23
|
-
"pinia": "^2.1.7",
|
|
24
|
-
"vue": "^3.4.29",
|
|
25
|
-
"vue-router": "^4.3.3"
|
|
26
|
-
},
|
|
27
|
-
"devDependencies": {
|
|
28
|
-
"@rushstack/eslint-patch": "^1.8.0",
|
|
29
|
-
"@vitejs/plugin-vue": "^5.0.5",
|
|
30
|
-
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
|
31
|
-
"@vue/eslint-config-prettier": "^9.0.0",
|
|
32
|
-
"eslint": "^8.57.0",
|
|
33
|
-
"eslint-plugin-vue": "^9.23.0",
|
|
34
|
-
"prettier": "^3.2.5",
|
|
35
|
-
"sass-embedded": "^1.97.0",
|
|
36
|
-
"vite": "^5.3.1"
|
|
37
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "c-image",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"author": "",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"description": "封装vue3组件库",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"vue3",
|
|
10
|
+
"封装组件库"
|
|
11
|
+
],
|
|
12
|
+
"main": "lib/my-vue-library.es.js",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite",
|
|
15
|
+
"build": "vite build",
|
|
16
|
+
"preview": "vite preview",
|
|
17
|
+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
|
18
|
+
"format": "prettier --write src/"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@element-plus/icons-vue": "^2.3.2",
|
|
22
|
+
"element-plus": "^2.11.4",
|
|
23
|
+
"pinia": "^2.1.7",
|
|
24
|
+
"vue": "^3.4.29",
|
|
25
|
+
"vue-router": "^4.3.3"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@rushstack/eslint-patch": "^1.8.0",
|
|
29
|
+
"@vitejs/plugin-vue": "^5.0.5",
|
|
30
|
+
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
|
31
|
+
"@vue/eslint-config-prettier": "^9.0.0",
|
|
32
|
+
"eslint": "^8.57.0",
|
|
33
|
+
"eslint-plugin-vue": "^9.23.0",
|
|
34
|
+
"prettier": "^3.2.5",
|
|
35
|
+
"sass-embedded": "^1.97.0",
|
|
36
|
+
"vite": "^5.3.1"
|
|
37
|
+
}
|
|
38
38
|
}
|