btt-ui 1.0.39 → 1.0.40
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.
|
@@ -23,8 +23,8 @@ class f {
|
|
|
23
23
|
});
|
|
24
24
|
let s = document.createElement("ul");
|
|
25
25
|
s.className = "action-item-wapper";
|
|
26
|
-
let
|
|
27
|
-
|
|
26
|
+
let l = document.createElement("li");
|
|
27
|
+
l.className = "action-item rotate-left", l.setAttribute("data-key", "rotateleft"), s.appendChild(l);
|
|
28
28
|
let r = document.createElement("li");
|
|
29
29
|
r.className = "action-item rotate-right", r.setAttribute("data-key", "rotateright"), s.appendChild(r);
|
|
30
30
|
let o = document.createElement("ul");
|
|
@@ -35,19 +35,19 @@ class f {
|
|
|
35
35
|
i.className = "";
|
|
36
36
|
});
|
|
37
37
|
};
|
|
38
|
-
Array.isArray(this._binding.list) ? typeof this._binding.list[0] == "string" ? (this._curImgIndex = this._binding.list.findIndex((i) => i
|
|
39
|
-
let
|
|
40
|
-
|
|
38
|
+
Array.isArray(this._binding.list) ? typeof this._binding.list[0] == "string" ? (this._curImgIndex = this._binding.list.findIndex((i) => i.indexOf(this._image.src) > -1), this._binding.list && this._binding.list.forEach((i, d) => {
|
|
39
|
+
let n = document.createElement("li");
|
|
40
|
+
n.className = this._curImgIndex == d ? "cur" : "";
|
|
41
41
|
let _ = document.createElement("img");
|
|
42
|
-
_.setAttribute("src", i),
|
|
43
|
-
t.style.transform = "scale(0)", t.src = i, h(),
|
|
42
|
+
_.setAttribute("src", i), n.append(_), o.appendChild(n), a.push(n), n.onclick = function() {
|
|
43
|
+
t.style.transform = "scale(0)", t.src = i, h(), n.className = "cur";
|
|
44
44
|
};
|
|
45
45
|
})) : (this._curImgIndex = this._binding.list.findIndex((i) => i.url == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
|
|
46
|
-
let
|
|
47
|
-
|
|
46
|
+
let n = document.createElement("li");
|
|
47
|
+
n.className = this._curImgIndex == d ? "cur" : "";
|
|
48
48
|
let _ = document.createElement("img");
|
|
49
|
-
_.setAttribute("src", i.url),
|
|
50
|
-
t.style.transform = "scale(0)", t.src = i.url, h(),
|
|
49
|
+
_.setAttribute("src", i.url), n.append(_), o.appendChild(n), a.push(n), n.onclick = function() {
|
|
50
|
+
t.style.transform = "scale(0)", t.src = i.url, h(), n.className = "cur";
|
|
51
51
|
};
|
|
52
52
|
})) : o.style.display = "none";
|
|
53
53
|
let m = {
|
|
@@ -62,10 +62,10 @@ class f {
|
|
|
62
62
|
i.target.dataset.key && m[i.target.dataset.key]();
|
|
63
63
|
}, this._mask.appendChild(s), this._mask.appendChild(o), this._binding.el ? document.querySelector(this._binding.el).appendChild(this._mask) : document.body.appendChild(this._mask);
|
|
64
64
|
}
|
|
65
|
-
_getImgSize(e, t, s,
|
|
66
|
-
const r = e / t, o = s /
|
|
65
|
+
_getImgSize(e, t, s, l) {
|
|
66
|
+
const r = e / t, o = s / l;
|
|
67
67
|
let a, h;
|
|
68
|
-
return r >= o ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t >
|
|
68
|
+
return r >= o ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t > l ? (a = l / t * e, h = l) : (a = e, h = t), { width: a, height: h };
|
|
69
69
|
}
|
|
70
70
|
_drag(e) {
|
|
71
71
|
e.addEventListener("pointerdown", (t) => {
|
|
@@ -86,8 +86,8 @@ class f {
|
|
|
86
86
|
this._mask.addEventListener("wheel", (t) => {
|
|
87
87
|
let s = 1.1;
|
|
88
88
|
t.deltaY > 0 && (s = 1 / 1.1);
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
89
|
+
const l = this._scale * s;
|
|
90
|
+
if (l > this._maxScale ? (s = this._maxScale / this._scale, this._scale = this._maxScale) : l < this._minScale ? (s = this._minScale / this._scale, this._scale = this._minScale) : this._scale = l, t.target.tagName === "IMG")
|
|
91
91
|
if (this._binding.type == "transform") {
|
|
92
92
|
const r = {
|
|
93
93
|
x: (s - 1) * this._result.width * 0.5,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineComponent as V, ref as
|
|
2
|
-
import { Icon as
|
|
1
|
+
import { defineComponent as V, ref as x, reactive as M, watch as q, openBlock as l, createElementBlock as r, renderSlot as m, createElementVNode as c, createVNode as L, unref as g, withModifiers as $, createCommentVNode as u, createBlock as A, Fragment as F, normalizeClass as N, renderList as S, toDisplayString as d, createTextVNode as R, Teleport as U, nextTick as J } from "vue";
|
|
2
|
+
import { Icon as p } from "../../icon/index.mjs";
|
|
3
3
|
import "./style/index.css";
|
|
4
|
-
import { uploadImg as
|
|
5
|
-
import { Dragger as
|
|
6
|
-
import { ZoomIn as
|
|
7
|
-
const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "upload-btn-section" }, W = { class: "btn-box" }, X = { class: "img-sec-box" }, Y = ["src"], _ = { class: "img-wrapper" }, ee = ["src", "title"], te = ["src", "title"], ie = ["src", "title"], le = ["onClick"], se = ["onClick"],
|
|
4
|
+
import { uploadImg as Z } from "./uploadFile2.mjs";
|
|
5
|
+
import { Dragger as G } from "../../directives/drag.mjs";
|
|
6
|
+
import { ZoomIn as H } from "../../directives/zoomIn.mjs";
|
|
7
|
+
const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "upload-btn-section" }, W = { class: "btn-box" }, X = { class: "img-sec-box" }, Y = ["src"], _ = { class: "img-wrapper" }, ee = ["src", "title"], te = ["src", "title"], ie = ["src", "title"], le = ["onClick"], se = ["onClick"], re = { class: "k-file-extensions-desc" }, oe = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "error-tip"
|
|
10
10
|
}, ne = { key: 0 }, ue = {
|
|
@@ -12,7 +12,7 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
12
12
|
class: "k-upload-file-progress"
|
|
13
13
|
}, ae = V({
|
|
14
14
|
name: "k-upload-file"
|
|
15
|
-
}),
|
|
15
|
+
}), pe = V({
|
|
16
16
|
...ae,
|
|
17
17
|
props: {
|
|
18
18
|
data: {
|
|
@@ -60,125 +60,129 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
emits: ["limitError", "success", "deleteSuccess", "fileSizeError"],
|
|
63
|
-
setup(
|
|
64
|
-
const v =
|
|
65
|
-
let
|
|
66
|
-
const
|
|
67
|
-
let
|
|
68
|
-
const
|
|
63
|
+
setup(n, { expose: B, emit: j }) {
|
|
64
|
+
const v = x();
|
|
65
|
+
let k;
|
|
66
|
+
const h = x(!1), a = n;
|
|
67
|
+
let T = a.maxSize * 1024 * 1024;
|
|
68
|
+
const D = a.loadingFileMaxSize * 1024 * 1024, E = j, i = M({
|
|
69
69
|
fileList: new Array(),
|
|
70
70
|
errFiles: new Array()
|
|
71
71
|
});
|
|
72
|
-
i.fileList = a.data,
|
|
72
|
+
i.fileList = a.data, q(() => a.data, (e) => {
|
|
73
73
|
i.fileList = e;
|
|
74
74
|
}, { deep: !0 });
|
|
75
|
-
const
|
|
76
|
-
for (let
|
|
77
|
-
e[
|
|
75
|
+
const O = (e) => {
|
|
76
|
+
for (let s = 0; s < e.length; s++)
|
|
77
|
+
e[s].size > D && (h.value = !0);
|
|
78
78
|
}, C = () => {
|
|
79
|
-
|
|
79
|
+
k && k.hide(), Z({
|
|
80
80
|
acceptType: a.accept,
|
|
81
81
|
limit: a.limit,
|
|
82
|
-
maxSize:
|
|
82
|
+
maxSize: T,
|
|
83
83
|
success: async (e) => {
|
|
84
|
-
a.requestApi &&
|
|
85
|
-
let
|
|
84
|
+
a.requestApi && O(e), i.errFiles = new Array();
|
|
85
|
+
let s = new Array();
|
|
86
86
|
if (a.requestApi) {
|
|
87
87
|
let t = await a.requestApi(a.params, e);
|
|
88
88
|
if (t.code == a.successCode) {
|
|
89
|
-
|
|
90
|
-
for (let
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}),
|
|
89
|
+
h.value && (h.value = !1);
|
|
90
|
+
for (let o = 0; o < t.data.length; o++)
|
|
91
|
+
s.push(t.data[o]);
|
|
92
|
+
s.forEach((o) => {
|
|
93
|
+
o.name = o.fileOriginName, o.type = "image/" + o.fileSuffix;
|
|
94
|
+
}), b(s);
|
|
95
95
|
} else
|
|
96
96
|
console.log(t.msg);
|
|
97
97
|
} else {
|
|
98
98
|
for (let t = 0; t < e.length; t++)
|
|
99
|
-
e[t].url = window.URL.createObjectURL(e[t]),
|
|
100
|
-
|
|
99
|
+
e[t].url = window.URL.createObjectURL(e[t]), s.push(e[t]);
|
|
100
|
+
b(s);
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
limitError: (e) => {
|
|
104
|
-
|
|
104
|
+
E("limitError"), i.errFiles = new Array();
|
|
105
105
|
},
|
|
106
106
|
fileSizeError: (e) => {
|
|
107
|
-
i.errFiles = e,
|
|
107
|
+
i.errFiles = e, E("fileSizeError", e);
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
|
-
},
|
|
111
|
-
a.limit == 1 ? (i.fileList = e, a.type == "image" &&
|
|
112
|
-
|
|
113
|
-
})) : i.fileList = [...i.fileList, ...e],
|
|
110
|
+
}, b = (e) => {
|
|
111
|
+
a.limit == 1 ? (i.fileList = e, a.type == "image" && J(() => {
|
|
112
|
+
k ? k.updateSrc(f(i.fileList[0].url)) : k = new H(v.value, { type: "margin" });
|
|
113
|
+
})) : i.fileList = [...i.fileList, ...e], E("success", i.fileList);
|
|
114
114
|
};
|
|
115
115
|
function I(e) {
|
|
116
|
-
const
|
|
117
|
-
for (let t = 0; t <
|
|
118
|
-
const
|
|
119
|
-
if (
|
|
120
|
-
return
|
|
116
|
+
const s = document.cookie.split("; ");
|
|
117
|
+
for (let t = 0; t < s.length; t++) {
|
|
118
|
+
const o = s[t].split("=");
|
|
119
|
+
if (o[0] === e)
|
|
120
|
+
return o[1];
|
|
121
121
|
}
|
|
122
122
|
return "";
|
|
123
123
|
}
|
|
124
|
-
const
|
|
125
|
-
let
|
|
126
|
-
i.fileList.splice(e, 1),
|
|
127
|
-
},
|
|
128
|
-
|
|
124
|
+
const f = (e) => a.hasToken ? `${e}?token=${I("bearer")}` : e, w = (e) => {
|
|
125
|
+
let s = i.fileList[e];
|
|
126
|
+
i.fileList.splice(e, 1), E("deleteSuccess", { deleteFile: s, result: i.fileList });
|
|
127
|
+
}, z = (e) => {
|
|
128
|
+
let s = new Array();
|
|
129
|
+
i.fileList.forEach((o) => {
|
|
130
|
+
let y = JSON.parse(JSON.stringify(o));
|
|
131
|
+
y.url.indexOf("token=") < 0 && (y.url = f(y.url)), s.push(y);
|
|
132
|
+
}), new G(e.target, { type: "margin", list: s }).build();
|
|
129
133
|
};
|
|
130
134
|
return B({
|
|
131
135
|
clearFiles: () => {
|
|
132
136
|
i.fileList = new Array();
|
|
133
137
|
},
|
|
134
|
-
deleteFile:
|
|
135
|
-
}), (e,
|
|
136
|
-
|
|
137
|
-
|
|
138
|
+
deleteFile: w
|
|
139
|
+
}), (e, s) => (l(), r("div", K, [
|
|
140
|
+
n.isView ? u("", !0) : m(e.$slots, "default", { key: 0 }, () => [
|
|
141
|
+
n.type == "file" ? (l(), r("div", P, [
|
|
138
142
|
c("span", { onClick: C }, [
|
|
139
143
|
m(e.$slots, "icon", {}, () => [
|
|
140
144
|
c("div", Q, [
|
|
141
145
|
c("div", W, [
|
|
142
|
-
|
|
146
|
+
L(g(p), {
|
|
143
147
|
name: "download",
|
|
144
148
|
color: "#cccccc",
|
|
145
149
|
size: "20"
|
|
146
150
|
}),
|
|
147
|
-
|
|
151
|
+
s[1] || (s[1] = c("span", null, "\u4E0A\u4F20\u9644\u4EF6", -1))
|
|
148
152
|
])
|
|
149
153
|
])
|
|
150
154
|
])
|
|
151
155
|
])
|
|
152
|
-
])) : (l(),
|
|
156
|
+
])) : (l(), r("div", {
|
|
153
157
|
key: 1,
|
|
154
158
|
class: "btn-file-image",
|
|
155
|
-
onClick:
|
|
159
|
+
onClick: $(C, ["stop"])
|
|
156
160
|
}, [
|
|
157
161
|
c("div", X, [
|
|
158
|
-
i.fileList.length > 0 &&
|
|
162
|
+
i.fileList.length > 0 && n.limit == 1 ? (l(), r("img", {
|
|
159
163
|
key: 0,
|
|
160
|
-
src:
|
|
164
|
+
src: f(i.fileList[0].url),
|
|
161
165
|
ref_key: "imgRef",
|
|
162
166
|
ref: v
|
|
163
167
|
}, null, 8, Y)) : u("", !0)
|
|
164
168
|
]),
|
|
165
|
-
!
|
|
169
|
+
!n.isView && i.fileList.length > 0 && n.limit == 1 ? (l(), r("span", {
|
|
166
170
|
key: 0,
|
|
167
171
|
class: "k-file-icon-close",
|
|
168
|
-
onClick:
|
|
172
|
+
onClick: s[0] || (s[0] = $((t) => w(0), ["stop"]))
|
|
169
173
|
}, [
|
|
170
|
-
|
|
174
|
+
L(g(p), {
|
|
171
175
|
name: "close",
|
|
172
176
|
size: "12"
|
|
173
177
|
})
|
|
174
178
|
])) : u("", !0),
|
|
175
179
|
m(e.$slots, "icon", {}, () => [
|
|
176
|
-
i.fileList.length == 0 &&
|
|
180
|
+
i.fileList.length == 0 && n.limit == 1 ? (l(), A(g(p), {
|
|
177
181
|
key: 0,
|
|
178
182
|
name: "plus",
|
|
179
183
|
color: "#409eff"
|
|
180
184
|
})) : u("", !0),
|
|
181
|
-
|
|
185
|
+
n.limit > 1 ? (l(), A(g(p), {
|
|
182
186
|
key: 1,
|
|
183
187
|
name: "plus",
|
|
184
188
|
color: "#409eff"
|
|
@@ -189,36 +193,36 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
189
193
|
m(e.$slots, "files", {
|
|
190
194
|
data: i.fileList
|
|
191
195
|
}, () => [
|
|
192
|
-
|
|
193
|
-
i.fileList.length > 0 ? (l(),
|
|
196
|
+
n.type == "image" && n.limit > 1 ? (l(), r(F, { key: 0 }, [
|
|
197
|
+
i.fileList.length > 0 ? (l(), r("ul", {
|
|
194
198
|
key: 0,
|
|
195
|
-
class:
|
|
199
|
+
class: N(["k-image-list", { "can-edit": !n.isView }])
|
|
196
200
|
}, [
|
|
197
|
-
(l(!0),
|
|
201
|
+
(l(!0), r(F, null, S(i.fileList, (t, o) => (l(), r("li", { key: o }, [
|
|
198
202
|
c("div", _, [
|
|
199
|
-
t.type == "image/webp" ? (l(),
|
|
203
|
+
t.type == "image/webp" ? (l(), r("img", {
|
|
200
204
|
key: 0,
|
|
201
|
-
src:
|
|
202
|
-
onClick:
|
|
205
|
+
src: f(t.url),
|
|
206
|
+
onClick: z,
|
|
203
207
|
title: t.name
|
|
204
|
-
}, null, 8, ee)) : t.type == "image/png" ? (l(),
|
|
208
|
+
}, null, 8, ee)) : t.type == "image/png" ? (l(), r("img", {
|
|
205
209
|
key: 1,
|
|
206
|
-
src:
|
|
207
|
-
onClick:
|
|
210
|
+
src: f(t.url),
|
|
211
|
+
onClick: z,
|
|
208
212
|
title: t.name
|
|
209
|
-
}, null, 8, te)) : t.type == "image/jpg" || t.type == "image/jpeg" ? (l(),
|
|
213
|
+
}, null, 8, te)) : t.type == "image/jpg" || t.type == "image/jpeg" ? (l(), r("img", {
|
|
210
214
|
key: 2,
|
|
211
|
-
src:
|
|
212
|
-
onClick:
|
|
215
|
+
src: f(t.url),
|
|
216
|
+
onClick: z,
|
|
213
217
|
title: t.name
|
|
214
218
|
}, null, 8, ie)) : u("", !0)
|
|
215
219
|
]),
|
|
216
|
-
|
|
220
|
+
n.isView ? u("", !0) : (l(), r("span", {
|
|
217
221
|
key: 0,
|
|
218
222
|
class: "k-file-icon-close",
|
|
219
|
-
onClick: (
|
|
223
|
+
onClick: (y) => w(o)
|
|
220
224
|
}, [
|
|
221
|
-
|
|
225
|
+
L(g(p), {
|
|
222
226
|
name: "close",
|
|
223
227
|
size: "12"
|
|
224
228
|
})
|
|
@@ -226,20 +230,20 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
226
230
|
]))), 128))
|
|
227
231
|
], 2)) : u("", !0)
|
|
228
232
|
], 64)) : u("", !0),
|
|
229
|
-
|
|
230
|
-
i.fileList.length > 0 ? (l(),
|
|
233
|
+
n.type == "file" ? (l(), r(F, { key: 1 }, [
|
|
234
|
+
i.fileList.length > 0 ? (l(), r("ul", {
|
|
231
235
|
key: 0,
|
|
232
|
-
class:
|
|
236
|
+
class: N(["k-file-list", { "can-edit": !n.isView }])
|
|
233
237
|
}, [
|
|
234
|
-
(l(!0),
|
|
238
|
+
(l(!0), r(F, null, S(i.fileList, (t, o) => (l(), r("li", { key: o }, [
|
|
235
239
|
m(e.$slots, "file", { data: t }, () => [
|
|
236
240
|
c("span", null, d(t.name), 1),
|
|
237
|
-
|
|
241
|
+
n.isView ? u("", !0) : (l(), r("span", {
|
|
238
242
|
key: 0,
|
|
239
243
|
class: "k-file-icon-close",
|
|
240
|
-
onClick: (
|
|
244
|
+
onClick: (y) => w(o)
|
|
241
245
|
}, [
|
|
242
|
-
|
|
246
|
+
L(g(p), {
|
|
243
247
|
name: "close",
|
|
244
248
|
size: "12"
|
|
245
249
|
})
|
|
@@ -250,21 +254,21 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
250
254
|
], 64)) : u("", !0)
|
|
251
255
|
]),
|
|
252
256
|
m(e.$slots, "tip", {}, () => [
|
|
253
|
-
c("div",
|
|
257
|
+
c("div", re, "\u652F\u6301\u7684" + d(n.type == "file" ? "\u6587\u4EF6" : "\u56FE\u7247") + "\u683C\u5F0F\u6709\uFF1A" + d(n.accept.join(",")) + ",\u6700\u591A\u4E0A\u4F20" + d(n.limit) + "\u4E2A\u6587\u4EF6," + d(n.type == "file" ? "\u5355\u4E2A\u6587\u4EF6" : "\u5355\u5F20\u56FE\u7247") + "\u4E0D\u80FD\u5927\u4E8E" + d(n.maxSize) + "MB", 1)
|
|
254
258
|
]),
|
|
255
259
|
m(e.$slots, "sizeError", {
|
|
256
260
|
data: i.errFiles
|
|
257
261
|
}, () => [
|
|
258
|
-
i.errFiles.length > 0 ? (l(),
|
|
259
|
-
c("span", null, " \u8D85\u51FA\u5927\u5C0F\u9650\u5236\u7684" + d(
|
|
260
|
-
(l(!0),
|
|
261
|
-
|
|
262
|
-
|
|
262
|
+
i.errFiles.length > 0 ? (l(), r("div", oe, [
|
|
263
|
+
c("span", null, " \u8D85\u51FA\u5927\u5C0F\u9650\u5236\u7684" + d(n.type == "file" ? "\u6587\u4EF6" : "\u56FE\u7247") + "\u6709\uFF1A", 1),
|
|
264
|
+
(l(!0), r(F, null, S(i.errFiles, (t, o) => (l(), r("span", { key: o }, [
|
|
265
|
+
o > 0 ? (l(), r("span", ne, ", ")) : u("", !0),
|
|
266
|
+
R(" " + d(t.name), 1)
|
|
263
267
|
]))), 128))
|
|
264
268
|
])) : u("", !0)
|
|
265
269
|
]),
|
|
266
|
-
(l(),
|
|
267
|
-
|
|
270
|
+
(l(), A(U, { to: "body" }, [
|
|
271
|
+
h.value ? (l(), r("div", ue, [...s[2] || (s[2] = [
|
|
268
272
|
c("div", { class: "text" }, "\u6587\u4EF6\u4E0A\u4F20\u4E2D,\u8BF7\u8010\u5FC3\u7B49\u5F85...", -1)
|
|
269
273
|
])])) : u("", !0)
|
|
270
274
|
]))
|
|
@@ -272,5 +276,5 @@ const K = { class: "k-upload-file-wrapper" }, P = { key: 0 }, Q = { class: "uplo
|
|
|
272
276
|
}
|
|
273
277
|
});
|
|
274
278
|
export {
|
|
275
|
-
|
|
279
|
+
pe as default
|
|
276
280
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)},window.addEventListener("keyup",i=>{i.stopPropagation(),i.code=="Escape"&&this.remove()});let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let o=document.createElement("ul");o.className="dragger-file-list-wapper",t.src=this._image.src;let n=new Array;const h=()=>{n.forEach(i=>{i.className=""})};Array.isArray(this._binding.list)?typeof this._binding.list[0]=="string"?(this._curImgIndex=this._binding.list.findIndex(i=>i
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)},window.addEventListener("keyup",i=>{i.stopPropagation(),i.code=="Escape"&&this.remove()});let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let o=document.createElement("ul");o.className="dragger-file-list-wapper",t.src=this._image.src;let n=new Array;const h=()=>{n.forEach(i=>{i.className=""})};Array.isArray(this._binding.list)?typeof this._binding.list[0]=="string"?(this._curImgIndex=this._binding.list.findIndex(i=>i.indexOf(this._image.src)>-1),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i,h(),l.className="cur"}})):(this._curImgIndex=this._binding.list.findIndex(i=>i.url==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i.url),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i.url,h(),l.className="cur"}})):o.style.display="none";let f={rotateleft:()=>{this._angle-=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`},rotateright:()=>{this._angle+=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`}};s.onclick=i=>{i.target.dataset.key&&f[i.target.dataset.key]()},this._mask.appendChild(s),this._mask.appendChild(o),this._binding.el?document.querySelector(this._binding.el).appendChild(this._mask):document.body.appendChild(this._mask)}_getImgSize(e,t,s,a){const r=e/t,o=s/a;let n,h;return r>=o?e>s?(n=s,h=s/e*t):(n=e,h=t):t>a?(n=a/t*e,h=a):(n=e,h=t),{width:n,height:h}}_drag(e){e.addEventListener("pointerdown",t=>{this._isPointerdown=!0,e.setPointerCapture(t.pointerId),this._lastPointermove={x:t.clientX,y:t.clientY}}),e.addEventListener("pointermove",t=>{if(this._isPointerdown){const s={x:t.clientX,y:t.clientY};this._diff.x=s.x-this._lastPointermove.x,this._diff.y=s.y-this._lastPointermove.y,this._lastPointermove={x:s.x,y:s.y},this._x+=this._diff.x,this._y+=this._diff.y,this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px")}t.preventDefault()}),e.addEventListener("pointerup",t=>{this._isPointerdown&&(this._isPointerdown=!1)}),e.addEventListener("pointercancel",t=>{this._isPointerdown&&(this._isPointerdown=!1)})}_wheelZoom(e){this._mask.addEventListener("wheel",t=>{let s=1.1;t.deltaY>0&&(s=1/1.1);const a=this._scale*s;if(a>this._maxScale?(s=this._maxScale/this._scale,this._scale=this._maxScale):a<this._minScale?(s=this._minScale/this._scale,this._scale=this._minScale):this._scale=a,t.target.tagName==="IMG")if(this._binding.type=="transform"){const r={x:(s-1)*this._result.width*.5,y:(s-1)*this._result.height*.5};this._x-=(s-1)*(t.clientX-this._x)-r.x,this._y-=(s-1)*(t.clientY-this._y)-r.y}else this._x-=(s-1)*(t.clientX-this._x),this._y-=(s-1)*(t.clientY-this._y);this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px",e.style.width=this._result.width*this._scale+"px",e.style.height=this._result.height*this._scale+"px"),t.preventDefault()})}reset(){this._scale=.7,this._mask=document.createElement("div")}remove(){this._mask.innerHTML="",this._mask.remove(),this.reset()}}const p={mounted(c,e){let t=e.value,s=new m(c,{...t});c.onclick=()=>{s.build()}},unmounted(){console.log("distory")}};exports.Dragger=m;exports.dragger=p;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("../../icon/index.js");require("./style/index.css");const h=require("./uploadFile2.js"),w=require("../../directives/drag.js"),L=require("../../directives/zoomIn.js"),v={class:"k-upload-file-wrapper"},z={key:0},A={class:"upload-btn-section"},b={class:"btn-box"},x={class:"img-sec-box"},D=["src"],$={class:"img-wrapper"},j=["src","title"],I=["src","title"],q=["src","title"],M=["onClick"],T=["onClick"],O={class:"k-file-extensions-desc"},R={key:0,class:"error-tip"},U={key:0},J={key:0,class:"k-upload-file-progress"},P=e.defineComponent({name:"k-upload-file"}),Z=e.defineComponent({...P,props:{data:{type:Array,default:()=>[]},isView:{type:Boolean,default:!0},accept:{type:Array,default:[".png",".jpg",".jpeg",".webp",".xls",".pdf",".xlsx",".docx"]},requestApi:{type:Function},limit:{type:Number,default:1},type:{type:String,default:"image"},params:{type:Object,default:{}},hasToken:{type:Boolean,default:!1},maxSize:{type:Number,default:10},successCode:{type:Number,default:200},loadingFileMaxSize:{type:Number,default:20}},emits:["limitError","success","deleteSuccess","fileSizeError"],setup(r,{expose:B,emit:F}){const g=e.ref();let m;const d=e.ref(!1),c=r;let N=c.maxSize*1024*1024;const V=c.loadingFileMaxSize*1024*1024,k=F,o=e.reactive({fileList:new Array,errFiles:new Array});o.fileList=c.data,e.watch(()=>c.data,t=>{o.fileList=t},{deep:!0});const S=t=>{for(let i=0;i<t.length;i++)t[i].size>V&&(d.value=!0)},y=()=>{m&&m.hide(),h.uploadImg({acceptType:c.accept,limit:c.limit,maxSize:N,success:async t=>{c.requestApi&&S(t),o.errFiles=new Array;let i=new Array;if(c.requestApi){let l=await c.requestApi(c.params,t);if(l.code==c.successCode){d.value&&(d.value=!1);for(let n=0;n<l.data.length;n++)i.push(l.data[n]);i.forEach(n=>{n.name=n.fileOriginName,n.type="image/"+n.fileSuffix}),E(i)}else console.log(l.msg)}else{for(let l=0;l<t.length;l++)t[l].url=window.URL.createObjectURL(t[l]),i.push(t[l]);E(i)}},limitError:t=>{k("limitError"),o.errFiles=new Array},fileSizeError:t=>{o.errFiles=t,k("fileSizeError",t)}})},E=t=>{c.limit==1?(o.fileList=t,c.type=="image"&&e.nextTick(()=>{m?m.updateSrc(s(o.fileList[0].url)):m=new L.ZoomIn(g.value,{type:"margin"})})):o.fileList=[...o.fileList,...t],k("success",o.fileList)};function C(t){const i=document.cookie.split("; ");for(let l=0;l<i.length;l++){const n=i[l].split("=");if(n[0]===t)return n[1]}return""}const s=t=>c.hasToken?`${t}?token=${C("bearer")}`:t,f=t=>{let i=o.fileList[t];o.fileList.splice(t,1),k("deleteSuccess",{deleteFile:i,result:o.fileList})},p=t=>{let i=new Array;o.fileList.forEach(n=>{let a=JSON.parse(JSON.stringify(n));a.url.indexOf("token=")<0&&(a.url=s(a.url)),i.push(a)}),new w.Dragger(t.target,{type:"margin",list:i}).build()};return B({clearFiles:()=>{o.fileList=new Array},deleteFile:f}),(t,i)=>(e.openBlock(),e.createElementBlock("div",v,[r.isView?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0},()=>[r.type=="file"?(e.openBlock(),e.createElementBlock("div",z,[e.createElementVNode("span",{onClick:y},[e.renderSlot(t.$slots,"icon",{},()=>[e.createElementVNode("div",A,[e.createElementVNode("div",b,[e.createVNode(e.unref(u.Icon),{name:"download",color:"#cccccc",size:"20"}),i[1]||(i[1]=e.createElementVNode("span",null,"\u4E0A\u4F20\u9644\u4EF6",-1))])])])])])):(e.openBlock(),e.createElementBlock("div",{key:1,class:"btn-file-image",onClick:e.withModifiers(y,["stop"])},[e.createElementVNode("div",x,[o.fileList.length>0&&r.limit==1?(e.openBlock(),e.createElementBlock("img",{key:0,src:s(o.fileList[0].url),ref_key:"imgRef",ref:g},null,8,D)):e.createCommentVNode("",!0)]),!r.isView&&o.fileList.length>0&&r.limit==1?(e.openBlock(),e.createElementBlock("span",{key:0,class:"k-file-icon-close",onClick:i[0]||(i[0]=e.withModifiers(l=>f(0),["stop"]))},[e.createVNode(e.unref(u.Icon),{name:"close",size:"12"})])):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"icon",{},()=>[o.fileList.length==0&&r.limit==1?(e.openBlock(),e.createBlock(e.unref(u.Icon),{key:0,name:"plus",color:"#409eff"})):e.createCommentVNode("",!0),r.limit>1?(e.openBlock(),e.createBlock(e.unref(u.Icon),{key:1,name:"plus",color:"#409eff"})):e.createCommentVNode("",!0)])]))]),e.renderSlot(t.$slots,"files",{data:o.fileList},()=>[r.type=="image"&&r.limit>1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o.fileList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass(["k-image-list",{"can-edit":!r.isView}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.fileList,(l,n)=>(e.openBlock(),e.createElementBlock("li",{key:n},[e.createElementVNode("div",$,[l.type=="image/webp"?(e.openBlock(),e.createElementBlock("img",{key:0,src:s(l.url),onClick:p,title:l.name},null,8,j)):l.type=="image/png"?(e.openBlock(),e.createElementBlock("img",{key:1,src:s(l.url),onClick:p,title:l.name},null,8,I)):l.type=="image/jpg"||l.type=="image/jpeg"?(e.openBlock(),e.createElementBlock("img",{key:2,src:s(l.url),onClick:p,title:l.name},null,8,q)):e.createCommentVNode("",!0)]),r.isView?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:"k-file-icon-close",onClick:a=>f(n)},[e.createVNode(e.unref(u.Icon),{name:"close",size:"12"})],8,M))]))),128))],2)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),r.type=="file"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[o.fileList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass(["k-file-list",{"can-edit":!r.isView}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.fileList,(l,n)=>(e.openBlock(),e.createElementBlock("li",{key:n},[e.renderSlot(t.$slots,"file",{data:l},()=>[e.createElementVNode("span",null,e.toDisplayString(l.name),1),r.isView?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:"k-file-icon-close",onClick:a=>f(n)},[e.createVNode(e.unref(u.Icon),{name:"close",size:"12"})],8,T))])]))),128))],2)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)]),e.renderSlot(t.$slots,"tip",{},()=>[e.createElementVNode("div",O,"\u652F\u6301\u7684"+e.toDisplayString(r.type=="file"?"\u6587\u4EF6":"\u56FE\u7247")+"\u683C\u5F0F\u6709\uFF1A"+e.toDisplayString(r.accept.join(","))+",\u6700\u591A\u4E0A\u4F20"+e.toDisplayString(r.limit)+"\u4E2A\u6587\u4EF6,"+e.toDisplayString(r.type=="file"?"\u5355\u4E2A\u6587\u4EF6":"\u5355\u5F20\u56FE\u7247")+"\u4E0D\u80FD\u5927\u4E8E"+e.toDisplayString(r.maxSize)+"MB",1)]),e.renderSlot(t.$slots,"sizeError",{data:o.errFiles},()=>[o.errFiles.length>0?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("span",null," \u8D85\u51FA\u5927\u5C0F\u9650\u5236\u7684"+e.toDisplayString(r.type=="file"?"\u6587\u4EF6":"\u56FE\u7247")+"\u6709\uFF1A",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.errFiles,(l,n)=>(e.openBlock(),e.createElementBlock("span",{key:n},[n>0?(e.openBlock(),e.createElementBlock("span",U,", ")):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.name),1)]))),128))])):e.createCommentVNode("",!0)]),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[d.value?(e.openBlock(),e.createElementBlock("div",J,[...i[2]||(i[2]=[e.createElementVNode("div",{class:"text"},"\u6587\u4EF6\u4E0A\u4F20\u4E2D,\u8BF7\u8010\u5FC3\u7B49\u5F85...",-1)])])):e.createCommentVNode("",!0)]))]))}});exports.default=Z;
|