fast-vue3-ui
Version:
<h1 align="center"> fast-ui </h1>
376 lines (375 loc) • 12.6 kB
JavaScript
import { defineComponent as W, ref as Q, reactive as E, toRefs as X, onMounted as Y, watch as Z, resolveComponent as p, openBlock as x, createElementBlock as _, createElementVNode as s, normalizeClass as k, createVNode as l, unref as n, isRef as ee, withCtx as u, createBlock as h, createCommentVNode as v, normalizeStyle as S, createTextVNode as C, nextTick as oe } from "vue";
import "./style/index.css";
import { Plus as T, Upload as te, Minus as le, RefreshLeft as ue, RefreshRight as ae } from "@element-plus/icons-vue";
import { uploadProps as ne, uploadEmits as ie } from "./types.mjs";
import { uploadImg as re } from "../api/modules/upload.mjs";
import { useDebounceFn as se } from "@vueuse/core";
import { ElMessage as ce } from "element-plus";
const de = { class: "uploadAvatar-container" }, pe = ["src"], me = { class: "avatar-upload-preview-box" }, xe = { class: "avatar-upload-preview" }, fe = ["src"], ge = { class: "avatar-upload-preview1" }, _e = ["src"], he = /* @__PURE__ */ s("br", null, null, -1), ve = W({
name: "fast-upload-avatar"
}), ke = /* @__PURE__ */ W({
...ve,
props: ne,
emits: ie,
setup(D, { emit: w }) {
const m = D, f = Q("cropper"), c = E({
open: !1,
title: "\u56FE\u7247\u88C1\u526A",
visible: !1,
screenWidth: 0,
key: 0,
isShow: !0,
component: null
});
let { open: r, title: M, visible: y, isShow: R, component: V } = X(c);
const e = E({
img: "",
outputSize: 1,
outputType: "png",
info: !0,
canScale: !0,
autoCrop: !0,
autoCropWidth: 200,
autoCropHeight: 200,
fixed: !1,
fixedNumber: [1, 1],
full: !0,
fixedBox: !0,
canMove: !0,
canMoveBox: !0,
original: !0,
centerBox: !1,
height: !1,
infoTrue: !1,
maxImgSize: 3e3,
enlarge: 1,
mode: "100% 100%",
previews: {
url: "",
img: ""
}
}), A = se(() => {
c.screenWidth = document.body.clientWidth;
}, 500);
Y(() => {
m.modelValue && (e.img = "", q(m.modelValue, (o) => {
oe(() => {
e.img = o;
});
})), c.screenWidth = document.body.clientWidth, window.onresize = () => (() => {
A();
})(), c.component = !0;
}), Z(
() => c.screenWidth,
(o, t) => {
console.log(`watch\u76D1\u542C\u53D8\u5316\u524D\u7684\u6570\u636E\uFF1A${t}`), console.log(`watch\u76D1\u542C\u53D8\u5316\u540E\u7684\u6570\u636E\uFF1A${o}`), c.isShow = !1, o >= 540 ? (e.autoCropWidth = 200, e.autoCropHeight = 200) : (e.autoCropWidth = 140, e.autoCropHeight = 140), setTimeout(() => {
c.isShow = !0;
}, 0);
},
{
immediate: !0,
deep: !1
}
);
const F = () => {
r.value = !0;
};
function N(o) {
if (console.log("\u4E0A\u4F20\u9884\u5904\u7406"), o.type.indexOf("image/") === -1)
ce({
type: "error",
message: "\u6587\u4EF6\u683C\u5F0F\u9519\u8BEF\uFF0C\u8BF7\u4E0A\u4F20\u56FE\u7247\u7C7B\u578B,\u5982\uFF1AJPG\uFF0CPNG\u540E\u7F00\u7684\u6587\u4EF6\u3002"
});
else {
const t = new FileReader();
t.readAsDataURL(o), t.onload = () => {
e.img = t.result;
};
}
}
const z = () => {
}, L = () => {
f.value.rotateLeft();
}, U = () => {
f.value.rotateLeft();
};
function B(o) {
o = o || 1, f.value.changeScale(o);
}
const I = () => {
e.img = "", e.previews = {
url: "",
img: ""
};
}, H = () => {
f.value.getCropBlob((o) => {
console.log("xxxxxxxxxxxxxxxx===============xxxxxxxxxxxxxxxx", o);
let t = new FormData();
t.append("file", o, "logo.png"), t.append("type", "avatar");
let i = window.URL.createObjectURL(o);
w("update:modelValue", i), e.img = "", r.value = !1, re(t).then((a) => {
console.log("xxxxxxxxx", a), r.value = !1, e.img = a.data.url, w("update:modelValue", a.data.url);
});
});
}, O = function(o) {
console.log("xxxxxxxxxxxx", o), e.previews = o;
}, j = () => {
y.value = !0;
}, P = () => {
y.value = !1;
}, $ = (o) => {
let t = document.createElement("canvas");
return t.width = o.width, t.height = o.height, t.getContext("2d").drawImage(o, 0, 0, o.width, o.height), t.toDataURL("image/jpeg");
}, q = (o, t) => {
let i = new Image();
i.src = o + "?v=" + Math.random(), i.crossOrigin = "", i.onload = function() {
let a = $(i);
t && t(a);
};
};
return (o, t) => {
const i = p("vue-cropper"), a = p("el-col"), b = p("el-row"), G = p("el-icon"), d = p("el-button"), J = p("el-upload"), K = p("el-dialog");
return x(), _("div", de, [
s("div", null, [
m.modelValue ? (x(), _("div", {
key: 0,
class: k(["fast-upload-avatar", m.shape == "circle" ? "circle" : ""]),
onClick: F
}, [
s("img", {
src: m.modelValue,
class: "img-circle img-lg",
alt: ""
}, null, 8, pe)
], 2)) : (x(), _("div", {
key: 1,
class: k(["upload-avatar", m.shape == "circle" ? "circle" : ""]),
onClick: F
}, [
l(n(T), { class: "plus" })
], 2))
]),
l(K, {
title: n(M),
modelValue: n(r),
"onUpdate:modelValue": t[2] || (t[2] = (g) => ee(r) ? r.value = g : r = g),
width: "1000px",
style: { "max-width": "90%" },
onOpened: j,
onClose: P
}, {
default: u(() => [
l(b, null, {
default: u(() => [
l(a, {
xs: 24,
md: 12
}, {
default: u(() => [
n(V) && n(r) && n(R) ? (x(), h(i, {
key: 0,
class: "vueCropper",
ref_key: "cropper",
ref: f,
img: e.img,
outputSize: e.outputSize,
outputType: e.outputType,
info: e.info,
canScale: e.canScale,
autoCrop: e.autoCrop,
autoCropWidth: e.autoCropWidth,
autoCropHeight: e.autoCropHeight,
fixedBox: e.fixedBox,
fixed: e.fixed,
fixedNumber: e.fixedNumber,
canMove: e.canMove,
canMoveBox: e.canMoveBox,
original: e.original,
centerBox: e.centerBox,
infoTrue: e.infoTrue,
full: e.full,
enlarge: e.enlarge,
mode: e.mode,
onRealTime: O
}, null, 8, ["img", "outputSize", "outputType", "info", "canScale", "autoCrop", "autoCropWidth", "autoCropHeight", "fixedBox", "fixed", "fixedNumber", "canMove", "canMoveBox", "original", "centerBox", "infoTrue", "full", "enlarge", "mode"])) : v("", !0)
]),
_: 1
}),
l(a, {
class: "avatar-box",
xs: 24,
md: 12
}, {
default: u(() => [
s("div", me, [
s("div", xe, [
s("img", {
src: e.previews.url,
style: S(e.previews.img),
alt: ""
}, null, 12, fe)
]),
s("div", ge, [
s("img", {
src: e.previews.url,
style: S(e.previews.img),
alt: ""
}, null, 12, _e)
])
])
]),
_: 1
})
]),
_: 1
}),
he,
l(b, null, {
default: u(() => [
l(a, {
xs: 8,
sm: 4,
md: 4,
lg: 4
}, {
default: u(() => [
l(J, {
action: "#",
"http-request": z,
"show-file-list": !1,
"before-upload": N
}, {
default: u(() => [
l(d, null, {
default: u(() => [
l(G, { class: "el-icon--right" }, {
default: u(() => [
l(n(te))
]),
_: 1
}),
C(" \u9009\u62E9 ")
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}),
l(a, {
xs: 4,
sm: 2,
md: 2,
lg: 2
}, {
default: u(() => [
l(d, {
icon: n(T),
onClick: t[0] || (t[0] = (g) => B(1))
}, null, 8, ["icon"])
]),
_: 1
}),
l(a, {
xs: 4,
sm: 2,
md: 2,
lg: 2
}, {
default: u(() => [
l(d, {
icon: n(le),
onClick: t[1] || (t[1] = (g) => B(-1))
}, null, 8, ["icon"])
]),
_: 1
}),
l(a, {
xs: 4,
sm: 2,
md: 2,
lg: 2
}, {
default: u(() => [
l(d, {
icon: n(ue),
onClick: L
}, null, 8, ["icon"])
]),
_: 1
}),
l(a, {
xs: 4,
sm: 2,
md: 2,
lg: 2
}, {
default: u(() => [
l(d, {
icon: n(ae),
onClick: U
}, null, 8, ["icon"])
]),
_: 1
}),
l(a, {
class: "btns",
xs: 12,
sm: 6,
md: 6,
lg: 6,
style: { display: "flex", "justify-content": "center" }
}, {
default: u(() => [
e.img ? (x(), h(d, {
key: 0,
type: "danger",
style: { padding: "0 50px" },
onClick: I
}, {
default: u(() => [
C("\u6E05\u9664 ")
]),
_: 1
})) : v("", !0)
]),
_: 1
}),
l(a, {
class: "btns",
xs: 12,
sm: 6,
md: 6,
lg: 6,
style: { display: "flex", "justify-content": "center" }
}, {
default: u(() => [
e.img ? (x(), h(d, {
key: 0,
type: "primary",
style: { padding: "0 50px" },
onClick: H
}, {
default: u(() => [
C("\u63D0 \u4EA4")
]),
_: 1
})) : v("", !0)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["title", "modelValue"])
]);
};
}
});
export {
ke as default
};