@minilo/ui 0.0.3 → 0.0.4

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.
Files changed (33) hide show
  1. package/minilo/dist/index.full.js +20 -1117
  2. package/minilo/dist/index.full.min.js +1 -7
  3. package/minilo/dist/index.full.min.js.map +1 -1
  4. package/minilo/dist/index.full.min.mjs +1 -7
  5. package/minilo/dist/index.full.min.mjs.map +1 -1
  6. package/minilo/dist/index.full.mjs +21 -1118
  7. package/minilo/es/components/image-upload-pro/index.d.ts +502 -3
  8. package/minilo/es/components/image-upload-pro/index.vue.d.ts +504 -3
  9. package/minilo/es/components/image-upload-pro/index.vue2.mjs +21 -31
  10. package/minilo/es/components/image-upload-pro/type.d.ts +1 -0
  11. package/minilo/es/index.d.ts +502 -3
  12. package/minilo/es/resolver/index.d.ts +1 -1
  13. package/minilo/es/resolver/index.mjs +4 -1
  14. package/minilo/lib/components/image-upload-pro/index.d.ts +502 -3
  15. package/minilo/lib/components/image-upload-pro/index.vue.d.ts +504 -3
  16. package/minilo/lib/components/image-upload-pro/index.vue2.js +20 -30
  17. package/minilo/lib/components/image-upload-pro/type.d.ts +1 -0
  18. package/minilo/lib/index.d.ts +502 -3
  19. package/minilo/lib/resolver/index.d.ts +1 -1
  20. package/minilo/lib/resolver/index.js +4 -1
  21. package/package.json +1 -1
  22. package/minilo/es/components/button/type.mjs +0 -1
  23. package/minilo/es/components/chart/type.mjs +0 -1
  24. package/minilo/es/components/detail/type.mjs +0 -1
  25. package/minilo/es/components/number-range-input/props.mjs +0 -1
  26. package/minilo/es/components/tree-select/type.mjs +0 -1
  27. package/minilo/es/components/virtual-list/type.mjs +0 -1
  28. package/minilo/lib/components/button/type.js +0 -2
  29. package/minilo/lib/components/chart/type.js +0 -2
  30. package/minilo/lib/components/detail/type.js +0 -2
  31. package/minilo/lib/components/number-range-input/props.js +0 -2
  32. package/minilo/lib/components/tree-select/type.js +0 -2
  33. package/minilo/lib/components/virtual-list/type.js +0 -2
@@ -1,5 +1,5 @@
1
1
  import { getCurrentScope, onScopeDispose, toValue, computed, watch, shallowRef, getCurrentInstance, onMounted, defineComponent, ref, useAttrs, nextTick, onBeforeUnmount, createElementBlock, openBlock, mergeProps, unref, withDirectives, renderSlot, createCommentVNode, createElementVNode, normalizeClass, vShow, createVNode, markRaw, onUnmounted, h, mergeModels, useModel, withCtx, createBlock, Fragment, renderList, withModifiers, createTextVNode, toDisplayString, reactive, readonly, resolveDirective, createSlots, toHandlers, resolveDynamicComponent, resolveComponent, normalizeStyle, useSlots } from 'vue';
2
- import { ElEmpty, ElForm, ElRow, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElLink, ElMessage, ElTable, ElTableColumn, ElPagination, ElDescriptions, ElDescriptionsItem, ElTooltip, ElTree, ElMessageBox } from 'element-plus';
2
+ import { ElEmpty, ElForm, ElRow, ElCol, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElLink, ElMessage, ElTable, ElTableColumn, ElPagination, ElDescriptions, ElDescriptionsItem, ElTooltip, ElTree, ElUpload, ElImage, ElDialog, ElInputNumber, ElMessageBox } from 'element-plus';
3
3
  import axios from 'axios';
4
4
 
5
5
  const libraryNamePrefix = "ml";
@@ -7633,1094 +7633,6 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
7633
7633
 
7634
7634
  const MlTreeSelectDrawer = withInstall(_sfc_main$1);
7635
7635
 
7636
- const Y = {};
7637
- Y.getData = (t) => new Promise((e, i) => {
7638
- let s = {};
7639
- L(t).then((r) => {
7640
- s.arrayBuffer = r;
7641
- try {
7642
- s.orientation = N(r);
7643
- } catch {
7644
- s.orientation = -1;
7645
- }
7646
- e(s);
7647
- }).catch((r) => {
7648
- i(r);
7649
- });
7650
- });
7651
- function L(t) {
7652
- let e = null;
7653
- return new Promise((i, s) => {
7654
- if (t.src)
7655
- if (/^data\:/i.test(t.src))
7656
- e = k(t.src), i(e);
7657
- else if (/^blob\:/i.test(t.src)) {
7658
- var r = new FileReader();
7659
- r.onload = function(h) {
7660
- e = h.target.result, i(e);
7661
- }, E(t.src, function(h) {
7662
- r.readAsArrayBuffer(h);
7663
- });
7664
- } else {
7665
- var o = new XMLHttpRequest();
7666
- o.onload = function() {
7667
- if (this.status == 200 || this.status === 0)
7668
- e = o.response, i(e);
7669
- else
7670
- throw "Could not load image";
7671
- o = null;
7672
- }, o.open("GET", t.src, true), o.responseType = "arraybuffer", o.send(null);
7673
- }
7674
- else
7675
- s("img error");
7676
- });
7677
- }
7678
- function E(t, e) {
7679
- var i = new XMLHttpRequest();
7680
- i.open("GET", t, true), i.responseType = "blob", i.onload = function(s) {
7681
- (this.status == 200 || this.status === 0) && e(this.response);
7682
- }, i.send();
7683
- }
7684
- function k(t, e) {
7685
- e = e || t.match(/^data\:([^\;]+)\;base64,/mi)[1] || "", t = t.replace(/^data\:([^\;]+)\;base64,/gmi, "");
7686
- for (var i = atob(t), s = i.length % 2 == 0 ? i.length : i.length + 1, r = new ArrayBuffer(s), o = new Uint16Array(r), h = 0; h < s; h++)
7687
- o[h] = i.charCodeAt(h);
7688
- return r;
7689
- }
7690
- function T(t, e, i) {
7691
- var s = "", r;
7692
- for (r = e, i += e; r < i; r++)
7693
- s += String.fromCharCode(t.getUint8(r));
7694
- return s;
7695
- }
7696
- function N(t) {
7697
- var e = new DataView(t), i = e.byteLength, s, r, o, h, a, n, c, l, f, p;
7698
- if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
7699
- for (f = 2; f < i; ) {
7700
- if (e.getUint8(f) === 255 && e.getUint8(f + 1) === 225) {
7701
- c = f;
7702
- break;
7703
- }
7704
- f++;
7705
- }
7706
- if (c && (r = c + 4, o = c + 10, T(e, r, 4) === "Exif" && (n = e.getUint16(o), a = n === 18761, (a || n === 19789) && e.getUint16(o + 2, a) === 42 && (h = e.getUint32(o + 4, a), h >= 8 && (l = o + h)))), l) {
7707
- for (i = e.getUint16(l, a), p = 0; p < i; p++)
7708
- if (f = l + p * 12 + 2, e.getUint16(f, a) === 274) {
7709
- f += 8, s = e.getUint16(f, a);
7710
- break;
7711
- }
7712
- }
7713
- return s;
7714
- }
7715
- const $ = (t, e) => {
7716
- const i = t.__vccOpts || t;
7717
- for (const [s, r] of e)
7718
- i[s] = r;
7719
- return i;
7720
- }, z = defineComponent({
7721
- data: function() {
7722
- return {
7723
- // 容器高宽
7724
- w: 0,
7725
- h: 0,
7726
- // 图片缩放比例
7727
- scale: 1,
7728
- // 图片偏移x轴
7729
- x: 0,
7730
- // 图片偏移y轴
7731
- y: 0,
7732
- // 图片加载
7733
- loading: true,
7734
- // 图片真实宽度
7735
- trueWidth: 0,
7736
- // 图片真实高度
7737
- trueHeight: 0,
7738
- move: true,
7739
- // 移动的x
7740
- moveX: 0,
7741
- // 移动的y
7742
- moveY: 0,
7743
- // 开启截图
7744
- crop: false,
7745
- // 正在截图
7746
- cropping: false,
7747
- // 裁剪框大小
7748
- cropW: 0,
7749
- cropH: 0,
7750
- cropOldW: 0,
7751
- cropOldH: 0,
7752
- // 判断是否能够改变
7753
- canChangeX: false,
7754
- canChangeY: false,
7755
- // 改变的基准点
7756
- changeCropTypeX: 1,
7757
- changeCropTypeY: 1,
7758
- // 裁剪框的坐标轴
7759
- cropX: 0,
7760
- cropY: 0,
7761
- cropChangeX: 0,
7762
- cropChangeY: 0,
7763
- cropOffsertX: 0,
7764
- cropOffsertY: 0,
7765
- // 支持的滚动事件
7766
- support: "",
7767
- // 移动端手指缩放
7768
- touches: [],
7769
- touchNow: false,
7770
- // 图片旋转
7771
- rotate: 0,
7772
- isIos: false,
7773
- orientation: 0,
7774
- imgs: "",
7775
- // 图片缩放系数
7776
- coe: 0.2,
7777
- // 是否正在多次缩放
7778
- scaling: false,
7779
- scalingSet: "",
7780
- coeStatus: "",
7781
- // 控制emit触发频率
7782
- isCanShow: true,
7783
- // 图片是否等于截图大小
7784
- imgIsQqualCrop: false
7785
- };
7786
- },
7787
- props: {
7788
- img: {
7789
- type: [String, Blob, null, File],
7790
- default: ""
7791
- },
7792
- // 输出图片压缩比
7793
- outputSize: {
7794
- type: Number,
7795
- default: 1
7796
- },
7797
- outputType: {
7798
- type: String,
7799
- default: "jpeg"
7800
- },
7801
- info: {
7802
- type: Boolean,
7803
- default: true
7804
- },
7805
- // 是否开启滚轮放大缩小
7806
- canScale: {
7807
- type: Boolean,
7808
- default: true
7809
- },
7810
- // 是否自成截图框
7811
- autoCrop: {
7812
- type: Boolean,
7813
- default: false
7814
- },
7815
- autoCropWidth: {
7816
- type: [Number, String],
7817
- default: 0
7818
- },
7819
- autoCropHeight: {
7820
- type: [Number, String],
7821
- default: 0
7822
- },
7823
- // 是否开启固定宽高比
7824
- fixed: {
7825
- type: Boolean,
7826
- default: false
7827
- },
7828
- // 宽高比 w/h
7829
- fixedNumber: {
7830
- type: Array,
7831
- default: () => [1, 1]
7832
- },
7833
- // 固定大小 禁止改变截图框大小
7834
- fixedBox: {
7835
- type: Boolean,
7836
- default: false
7837
- },
7838
- // 输出截图是否缩放
7839
- full: {
7840
- type: Boolean,
7841
- default: false
7842
- },
7843
- // 是否可以拖动图片
7844
- canMove: {
7845
- type: Boolean,
7846
- default: true
7847
- },
7848
- // 是否可以拖动截图框
7849
- canMoveBox: {
7850
- type: Boolean,
7851
- default: true
7852
- },
7853
- // 上传图片按照原始比例显示
7854
- original: {
7855
- type: Boolean,
7856
- default: false
7857
- },
7858
- // 截图框能否超过图片
7859
- centerBox: {
7860
- type: Boolean,
7861
- default: false
7862
- },
7863
- // 是否根据dpr输出高清图片
7864
- high: {
7865
- type: Boolean,
7866
- default: true
7867
- },
7868
- // 截图框展示宽高类型
7869
- infoTrue: {
7870
- type: Boolean,
7871
- default: false
7872
- },
7873
- // 可以压缩图片宽高 默认不超过200
7874
- maxImgSize: {
7875
- type: [Number, String],
7876
- default: 2e3
7877
- },
7878
- // 倍数 可渲染当前截图框的n倍 0 - 1000;
7879
- enlarge: {
7880
- type: [Number, String],
7881
- default: 1
7882
- },
7883
- // 自动预览的固定宽度
7884
- preW: {
7885
- type: [Number, String],
7886
- default: 0
7887
- },
7888
- /*
7889
- 图片布局方式 mode 实现和css背景一样的效果
7890
- contain 居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
7891
- cover 拉伸布局 填充整个容器 mode: 'cover'
7892
- 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为auto。 mode: '50px'
7893
- 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。 mode: '50px 60px'
7894
- */
7895
- mode: {
7896
- type: String,
7897
- default: "contain"
7898
- },
7899
- //限制最小区域,可传1以上的数字和字符串,限制长宽都是这么大
7900
- // 也可以传数组[90,90]
7901
- limitMinSize: {
7902
- type: [Number, Array, String],
7903
- default: () => 10,
7904
- validator: function(t) {
7905
- return Array.isArray(t) ? Number(t[0]) >= 0 && Number(t[1]) >= 0 : Number(t) >= 0;
7906
- }
7907
- },
7908
- // 导出时,填充背景颜色
7909
- fillColor: {
7910
- type: String,
7911
- default: ""
7912
- }
7913
- },
7914
- computed: {
7915
- cropInfo() {
7916
- let t = {};
7917
- if (t.top = this.cropOffsertY > 21 ? "-21px" : "0px", t.width = this.cropW > 0 ? this.cropW : 0, t.height = this.cropH > 0 ? this.cropH : 0, this.infoTrue) {
7918
- let e = 1;
7919
- this.high && !this.full && (e = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (e = Math.abs(Number(this.enlarge))), t.width = t.width * e, t.height = t.height * e, this.full && (t.width = t.width / this.scale, t.height = t.height / this.scale);
7920
- }
7921
- return t.width = t.width.toFixed(0), t.height = t.height.toFixed(0), t;
7922
- },
7923
- isIE() {
7924
- return !!window.ActiveXObject || "ActiveXObject" in window;
7925
- },
7926
- passive() {
7927
- return this.isIE ? null : {
7928
- passive: false
7929
- };
7930
- },
7931
- // 是否处于左右旋转
7932
- isRotateRightOrLeft() {
7933
- return [1, -1, 3, -3].includes(this.rotate);
7934
- }
7935
- },
7936
- watch: {
7937
- // 如果图片改变, 重新布局
7938
- img() {
7939
- this.checkedImg();
7940
- },
7941
- imgs(t) {
7942
- t !== "" && this.reload();
7943
- },
7944
- cropW() {
7945
- this.showPreview();
7946
- },
7947
- cropH() {
7948
- this.showPreview();
7949
- },
7950
- cropOffsertX() {
7951
- this.showPreview();
7952
- },
7953
- cropOffsertY() {
7954
- this.showPreview();
7955
- },
7956
- scale(t, e) {
7957
- this.showPreview();
7958
- },
7959
- x() {
7960
- this.showPreview();
7961
- },
7962
- y() {
7963
- this.showPreview();
7964
- },
7965
- autoCrop(t) {
7966
- t && this.goAutoCrop();
7967
- },
7968
- // 修改了自动截图框
7969
- autoCropWidth() {
7970
- this.autoCrop && this.goAutoCrop();
7971
- },
7972
- autoCropHeight() {
7973
- this.autoCrop && this.goAutoCrop();
7974
- },
7975
- mode() {
7976
- this.checkedImg();
7977
- },
7978
- rotate() {
7979
- this.showPreview(), this.autoCrop ? this.goAutoCrop(this.cropW, this.cropH) : (this.cropW > 0 || this.cropH > 0) && this.goAutoCrop(this.cropW, this.cropH);
7980
- }
7981
- },
7982
- methods: {
7983
- getVersion(t) {
7984
- var e = navigator.userAgent.split(" "), i = "";
7985
- let s = 0;
7986
- const r = new RegExp(t, "i");
7987
- for (var o = 0; o < e.length; o++)
7988
- r.test(e[o]) && (i = e[o]);
7989
- return i ? s = i.split("/")[1].split(".") : s = ["0", "0", "0"], s;
7990
- },
7991
- checkOrientationImage(t, e, i, s) {
7992
- if (this.getVersion("chrome")[0] >= 81)
7993
- e = -1;
7994
- else if (this.getVersion("safari")[0] >= 605) {
7995
- const h = this.getVersion("version");
7996
- h[0] > 13 && h[1] > 1 && (e = -1);
7997
- } else {
7998
- const h = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
7999
- if (h) {
8000
- let a = h[1];
8001
- a = a.split("_"), (a[0] > 13 || a[0] >= 13 && a[1] >= 4) && (e = -1);
8002
- }
8003
- }
8004
- let r = document.createElement("canvas"), o = r.getContext("2d");
8005
- switch (o.save(), e) {
8006
- case 2:
8007
- r.width = i, r.height = s, o.translate(i, 0), o.scale(-1, 1);
8008
- break;
8009
- case 3:
8010
- r.width = i, r.height = s, o.translate(i / 2, s / 2), o.rotate(180 * Math.PI / 180), o.translate(-i / 2, -s / 2);
8011
- break;
8012
- case 4:
8013
- r.width = i, r.height = s, o.translate(0, s), o.scale(1, -1);
8014
- break;
8015
- case 5:
8016
- r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.scale(1, -1);
8017
- break;
8018
- case 6:
8019
- r.width = s, r.height = i, o.translate(s / 2, i / 2), o.rotate(90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
8020
- break;
8021
- case 7:
8022
- r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.translate(i, -s), o.scale(-1, 1);
8023
- break;
8024
- case 8:
8025
- r.height = i, r.width = s, o.translate(s / 2, i / 2), o.rotate(-90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
8026
- break;
8027
- default:
8028
- r.width = i, r.height = s;
8029
- }
8030
- o.drawImage(t, 0, 0, i, s), o.restore(), r.toBlob(
8031
- (h) => {
8032
- let a = URL.createObjectURL(h);
8033
- URL.revokeObjectURL(this.imgs), this.imgs = a;
8034
- },
8035
- "image/" + this.outputType,
8036
- 1
8037
- );
8038
- },
8039
- // checkout img
8040
- checkedImg() {
8041
- if (this.img === null || this.img === "") {
8042
- this.imgs = "", this.clearCrop();
8043
- return;
8044
- }
8045
- this.loading = true, this.scale = 1, this.rotate = 0, this.imgIsQqualCrop = false, this.clearCrop();
8046
- let t = new Image();
8047
- if (t.onload = () => {
8048
- if (this.img === "")
8049
- return this.$emit("img-load", new Error("图片不能为空")), false;
8050
- let i = t.width, s = t.height;
8051
- Y.getData(t).then((r) => {
8052
- this.orientation = r.orientation || 1;
8053
- let o = Number(this.maxImgSize);
8054
- if (!this.orientation && i < o & s < o) {
8055
- this.imgs = this.img;
8056
- return;
8057
- }
8058
- i > o && (s = s / i * o, i = o), s > o && (i = i / s * o, s = o), this.checkOrientationImage(t, this.orientation, i, s);
8059
- }).catch((r) => {
8060
- this.$emit("img-load", "error"), this.$emit("img-load-error", r);
8061
- });
8062
- }, t.onerror = (i) => {
8063
- this.$emit("img-load", "error"), this.$emit("img-load-error", i);
8064
- }, this.img.substr(0, 4) !== "data" && (t.crossOrigin = ""), this.isIE) {
8065
- var e = new XMLHttpRequest();
8066
- e.onload = function() {
8067
- var i = URL.createObjectURL(this.response);
8068
- t.src = i;
8069
- }, e.open("GET", this.img, true), e.responseType = "blob", e.send();
8070
- } else
8071
- t.src = this.img;
8072
- },
8073
- // 当按下鼠标键
8074
- startMove(t) {
8075
- if (t.preventDefault(), this.move && !this.crop) {
8076
- if (!this.canMove)
8077
- return false;
8078
- this.moveX = ("clientX" in t ? t.clientX : t.touches[0].clientX) - this.x, this.moveY = ("clientY" in t ? t.clientY : t.touches[0].clientY) - this.y, t.touches ? (window.addEventListener("touchmove", this.moveImg), window.addEventListener("touchend", this.leaveImg), t.touches.length == 2 && (this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale))) : (window.addEventListener("mousemove", this.moveImg), window.addEventListener("mouseup", this.leaveImg)), this.$emit("img-moving", {
8079
- moving: true,
8080
- axis: this.getImgAxis()
8081
- });
8082
- } else
8083
- this.cropping = true, window.addEventListener("mousemove", this.createCrop), window.addEventListener("mouseup", this.endCrop), window.addEventListener("touchmove", this.createCrop), window.addEventListener("touchend", this.endCrop), this.cropOffsertX = t.offsetX ? t.offsetX : t.touches[0].pageX - this.$refs.cropper.offsetLeft, this.cropOffsertY = t.offsetY ? t.offsetY : t.touches[0].pageY - this.$refs.cropper.offsetTop, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.cropW = 0, this.cropH = 0;
8084
- },
8085
- // 移动端缩放
8086
- touchScale(t) {
8087
- t.preventDefault();
8088
- let e = this.scale;
8089
- var i = {
8090
- x: this.touches[0].clientX,
8091
- y: this.touches[0].clientY
8092
- }, s = {
8093
- x: t.touches[0].clientX,
8094
- y: t.touches[0].clientY
8095
- }, r = {
8096
- x: this.touches[1].clientX,
8097
- y: this.touches[1].clientY
8098
- }, o = {
8099
- x: t.touches[1].clientX,
8100
- y: t.touches[1].clientY
8101
- }, h = Math.sqrt(
8102
- Math.pow(i.x - r.x, 2) + Math.pow(i.y - r.y, 2)
8103
- ), a = Math.sqrt(
8104
- Math.pow(s.x - o.x, 2) + Math.pow(s.y - o.y, 2)
8105
- ), n = a - h, c = 1;
8106
- c = c / this.trueWidth > c / this.trueHeight ? c / this.trueHeight : c / this.trueWidth, c = c > 0.1 ? 0.1 : c;
8107
- var l = c * n;
8108
- if (!this.touchNow) {
8109
- if (this.touchNow = true, n > 0 ? e += Math.abs(l) : n < 0 && e > Math.abs(l) && (e -= Math.abs(l)), this.touches = t.touches, setTimeout(() => {
8110
- this.touchNow = false;
8111
- }, 8), !this.checkoutImgAxis(this.x, this.y, e))
8112
- return false;
8113
- this.scale = e;
8114
- }
8115
- },
8116
- cancelTouchScale(t) {
8117
- window.removeEventListener("touchmove", this.touchScale);
8118
- },
8119
- // 移动图片
8120
- moveImg(t) {
8121
- if (t.preventDefault(), t.touches && t.touches.length === 2)
8122
- return this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale), window.removeEventListener("touchmove", this.moveImg), false;
8123
- let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
8124
- s = e - this.moveX, r = i - this.moveY, this.$nextTick(() => {
8125
- if (this.centerBox) {
8126
- let o = this.getImgAxis(s, r, this.scale), h = this.getCropAxis(), a = this.trueHeight * this.scale, n = this.trueWidth * this.scale, c, l, f, p;
8127
- switch (this.rotate) {
8128
- case 1:
8129
- case -1:
8130
- case 3:
8131
- case -3:
8132
- c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (a - n) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (n - a) / 2, f = c - a + this.cropW, p = l - n + this.cropH;
8133
- break;
8134
- default:
8135
- c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2, f = c - n + this.cropW, p = l - a + this.cropH;
8136
- break;
8137
- }
8138
- o.x1 >= h.x1 && (s = c), o.y1 >= h.y1 && (r = l), o.x2 <= h.x2 && (s = f), o.y2 <= h.y2 && (r = p);
8139
- }
8140
- this.x = s, this.y = r, this.$emit("img-moving", {
8141
- moving: true,
8142
- axis: this.getImgAxis()
8143
- });
8144
- });
8145
- },
8146
- // 移动图片结束
8147
- leaveImg(t) {
8148
- window.removeEventListener("mousemove", this.moveImg), window.removeEventListener("touchmove", this.moveImg), window.removeEventListener("mouseup", this.leaveImg), window.removeEventListener("touchend", this.leaveImg), this.$emit("img-moving", {
8149
- moving: false,
8150
- axis: this.getImgAxis()
8151
- });
8152
- },
8153
- // 缩放图片
8154
- scaleImg() {
8155
- this.canScale && window.addEventListener(this.support, this.changeSize, this.passive);
8156
- },
8157
- // 移出框
8158
- cancelScale() {
8159
- this.canScale && window.removeEventListener(this.support, this.changeSize);
8160
- },
8161
- // 改变大小函数
8162
- changeSize(t) {
8163
- t.preventDefault();
8164
- let e = this.scale;
8165
- var i = t.deltaY || t.wheelDelta, s = navigator.userAgent.indexOf("Firefox");
8166
- i = s > 0 ? i * 30 : i, this.isIE && (i = -i);
8167
- var r = this.coe;
8168
- r = r / this.trueWidth > r / this.trueHeight ? r / this.trueHeight : r / this.trueWidth;
8169
- var o = r * i;
8170
- o < 0 ? e += Math.abs(o) : e > Math.abs(o) && (e -= Math.abs(o));
8171
- let h = o < 0 ? "add" : "reduce";
8172
- if (h !== this.coeStatus && (this.coeStatus = h, this.coe = 0.2), this.scaling || (this.scalingSet = setTimeout(() => {
8173
- this.scaling = false, this.coe = this.coe += 0.01;
8174
- }, 50)), this.scaling = true, !this.checkoutImgAxis(this.x, this.y, e))
8175
- return false;
8176
- this.scale = e;
8177
- },
8178
- // 修改图片大小函数
8179
- changeScale(t) {
8180
- let e = this.scale;
8181
- t = t || 1;
8182
- var i = 20;
8183
- if (i = i / this.trueWidth > i / this.trueHeight ? i / this.trueHeight : i / this.trueWidth, t = t * i, t > 0 ? e += Math.abs(t) : e > Math.abs(t) && (e -= Math.abs(t)), !this.checkoutImgAxis(this.x, this.y, e))
8184
- return false;
8185
- this.scale = e;
8186
- },
8187
- // 创建截图框
8188
- createCrop(t) {
8189
- t.preventDefault();
8190
- var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
8191
- this.$nextTick(() => {
8192
- var s = e - this.cropX, r = i - this.cropY;
8193
- if (s > 0 ? (this.cropW = s + this.cropChangeX > this.w ? this.w - this.cropChangeX : s, this.cropOffsertX = this.cropChangeX) : (this.cropW = this.w - this.cropChangeX + Math.abs(s) > this.w ? this.cropChangeX : Math.abs(s), this.cropOffsertX = this.cropChangeX + s > 0 ? this.cropChangeX + s : 0), !this.fixed)
8194
- r > 0 ? (this.cropH = r + this.cropChangeY > this.h ? this.h - this.cropChangeY : r, this.cropOffsertY = this.cropChangeY) : (this.cropH = this.h - this.cropChangeY + Math.abs(r) > this.h ? this.cropChangeY : Math.abs(r), this.cropOffsertY = this.cropChangeY + r > 0 ? this.cropChangeY + r : 0);
8195
- else {
8196
- var o = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
8197
- o + this.cropOffsertY > this.h ? (this.cropH = this.h - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], s > 0 ? this.cropOffsertX = this.cropChangeX : this.cropOffsertX = this.cropChangeX - this.cropW) : this.cropH = o, this.cropOffsertY = this.cropOffsertY;
8198
- }
8199
- });
8200
- },
8201
- // 改变截图框大小
8202
- changeCropSize(t, e, i, s, r) {
8203
- t.preventDefault(), window.addEventListener("mousemove", this.changeCropNow), window.addEventListener("mouseup", this.changeCropEnd), window.addEventListener("touchmove", this.changeCropNow), window.addEventListener("touchend", this.changeCropEnd), this.canChangeX = e, this.canChangeY = i, this.changeCropTypeX = s, this.changeCropTypeY = r, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropOldW = this.cropW, this.cropOldH = this.cropH, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.fixed && this.canChangeX && this.canChangeY && (this.canChangeY = 0), this.$emit("change-crop-size", {
8204
- width: this.cropW,
8205
- height: this.cropH
8206
- });
8207
- },
8208
- // 正在改变
8209
- changeCropNow(t) {
8210
- t.preventDefault();
8211
- var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
8212
- let s = this.w, r = this.h, o = 0, h = 0;
8213
- if (this.centerBox) {
8214
- let c = this.getImgAxis(), l = c.x2, f = c.y2;
8215
- o = c.x1 > 0 ? c.x1 : 0, h = c.y1 > 0 ? c.y1 : 0, s > l && (s = l), r > f && (r = f);
8216
- }
8217
- const [a, n] = this.checkCropLimitSize();
8218
- this.$nextTick(() => {
8219
- var c = e - this.cropX, l = i - this.cropY;
8220
- if (this.canChangeX && (this.changeCropTypeX === 1 ? this.cropOldW - c < a ? (this.cropW = a, this.cropOffsertX = this.cropOldW + this.cropChangeX - o - a) : this.cropOldW - c > 0 ? (this.cropW = s - this.cropChangeX - c <= s - o ? this.cropOldW - c : this.cropOldW + this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX - c <= s - o ? this.cropChangeX + c : o) : (this.cropW = Math.abs(c) + this.cropChangeX <= s ? Math.abs(c) - this.cropOldW : s - this.cropOldW - this.cropChangeX, this.cropOffsertX = this.cropChangeX + this.cropOldW) : this.changeCropTypeX === 2 && (this.cropOldW + c < a ? this.cropW = a : this.cropOldW + c > 0 ? (this.cropW = this.cropOldW + c + this.cropOffsertX <= s ? this.cropOldW + c : s - this.cropOffsertX, this.cropOffsertX = this.cropChangeX) : (this.cropW = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? Math.abs(c + this.cropOldW) : this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? this.cropChangeX - Math.abs(c + this.cropOldW) : o))), this.canChangeY && (this.changeCropTypeY === 1 ? this.cropOldH - l < n ? (this.cropH = n, this.cropOffsertY = this.cropOldH + this.cropChangeY - h - n) : this.cropOldH - l > 0 ? (this.cropH = r - this.cropChangeY - l <= r - h ? this.cropOldH - l : this.cropOldH + this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY - l <= r - h ? this.cropChangeY + l : h) : (this.cropH = Math.abs(l) + this.cropChangeY <= r ? Math.abs(l) - this.cropOldH : r - this.cropOldH - this.cropChangeY, this.cropOffsertY = this.cropChangeY + this.cropOldH) : this.changeCropTypeY === 2 && (this.cropOldH + l < n ? this.cropH = n : this.cropOldH + l > 0 ? (this.cropH = this.cropOldH + l + this.cropOffsertY <= r ? this.cropOldH + l : r - this.cropOffsertY, this.cropOffsertY = this.cropChangeY) : (this.cropH = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? Math.abs(l + this.cropOldH) : this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? this.cropChangeY - Math.abs(l + this.cropOldH) : h))), this.canChangeX && this.fixed) {
8221
- var f = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
8222
- f < n ? (this.cropH = n, this.cropW = this.fixedNumber[0] * n / this.fixedNumber[1], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : f + this.cropOffsertY > r ? (this.cropH = r - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : this.cropH = f;
8223
- }
8224
- if (this.canChangeY && this.fixed) {
8225
- var p = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
8226
- p < a ? (this.cropW = a, this.cropH = this.fixedNumber[1] * a / this.fixedNumber[0], this.cropOffsertY = this.cropOldH + this.cropChangeY - this.cropH) : p + this.cropOffsertX > s ? (this.cropW = s - this.cropOffsertX, this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1]) : this.cropW = p;
8227
- }
8228
- });
8229
- },
8230
- checkCropLimitSize() {
8231
- let { cropW: t, cropH: e, limitMinSize: i } = this, s = new Array();
8232
- return Array.isArray(i) ? s = i : s = [i, i], t = parseFloat(s[0]), e = parseFloat(s[1]), [t, e];
8233
- },
8234
- // 结束改变
8235
- changeCropEnd(t) {
8236
- window.removeEventListener("mousemove", this.changeCropNow), window.removeEventListener("mouseup", this.changeCropEnd), window.removeEventListener("touchmove", this.changeCropNow), window.removeEventListener("touchend", this.changeCropEnd);
8237
- },
8238
- // 根据比例x/y,最小宽度,最小高度,现有宽度,现有高度,得到应该有的宽度和高度
8239
- calculateSize(t, e, i, s, r, o) {
8240
- const h = t / e;
8241
- let a = r, n = o;
8242
- return a < i && (a = i, n = Math.ceil(a / h)), n < s && (n = s, a = Math.ceil(n * h), a < i && (a = i, n = Math.ceil(a / h))), a < r && (a = r, n = Math.ceil(a / h)), n < o && (n = o, a = Math.ceil(n * h)), { width: a, height: n };
8243
- },
8244
- // 创建完成
8245
- endCrop() {
8246
- this.cropW === 0 && this.cropH === 0 && (this.cropping = false);
8247
- let [t, e] = this.checkCropLimitSize();
8248
- const { width: i, height: s } = this.fixed ? this.calculateSize(
8249
- this.fixedNumber[0],
8250
- this.fixedNumber[1],
8251
- t,
8252
- e,
8253
- this.cropW,
8254
- this.cropH
8255
- ) : { width: t, height: e };
8256
- i > this.cropW && (this.cropW = i, this.cropOffsertX + i > this.w && (this.cropOffsertX = this.w - i)), s > this.cropH && (this.cropH = s, this.cropOffsertY + s > this.h && (this.cropOffsertY = this.h - s)), window.removeEventListener("mousemove", this.createCrop), window.removeEventListener("mouseup", this.endCrop), window.removeEventListener("touchmove", this.createCrop), window.removeEventListener("touchend", this.endCrop);
8257
- },
8258
- // 开始截图
8259
- startCrop() {
8260
- this.crop = true;
8261
- },
8262
- // 停止截图
8263
- stopCrop() {
8264
- this.crop = false;
8265
- },
8266
- // 清除截图
8267
- clearCrop() {
8268
- this.cropping = false, this.cropW = 0, this.cropH = 0;
8269
- },
8270
- // 截图移动
8271
- cropMove(t) {
8272
- if (t.preventDefault(), !this.canMoveBox)
8273
- return this.crop = false, this.startMove(t), false;
8274
- if (t.touches && t.touches.length === 2)
8275
- return this.crop = false, this.startMove(t), this.leaveCrop(), false;
8276
- window.addEventListener("mousemove", this.moveCrop), window.addEventListener("mouseup", this.leaveCrop), window.addEventListener("touchmove", this.moveCrop), window.addEventListener("touchend", this.leaveCrop);
8277
- let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
8278
- s = e - this.cropOffsertX, r = i - this.cropOffsertY, this.cropX = s, this.cropY = r, this.$emit("crop-moving", {
8279
- moving: true,
8280
- axis: this.getCropAxis()
8281
- });
8282
- },
8283
- moveCrop(t, e) {
8284
- let i = 0, s = 0;
8285
- t && (t.preventDefault(), i = "clientX" in t ? t.clientX : t.touches[0].clientX, s = "clientY" in t ? t.clientY : t.touches[0].clientY), this.$nextTick(() => {
8286
- let r, o, h = i - this.cropX, a = s - this.cropY;
8287
- if (e && (h = this.cropOffsertX, a = this.cropOffsertY), h <= 0 ? r = 0 : h + this.cropW > this.w ? r = this.w - this.cropW : r = h, a <= 0 ? o = 0 : a + this.cropH > this.h ? o = this.h - this.cropH : o = a, this.centerBox) {
8288
- let n = this.getImgAxis();
8289
- r <= n.x1 && (r = n.x1), r + this.cropW > n.x2 && (r = n.x2 - this.cropW), o <= n.y1 && (o = n.y1), o + this.cropH > n.y2 && (o = n.y2 - this.cropH);
8290
- }
8291
- this.cropOffsertX = r, this.cropOffsertY = o, this.$emit("crop-moving", {
8292
- moving: true,
8293
- axis: this.getCropAxis()
8294
- });
8295
- });
8296
- },
8297
- // 算出不同场景下面 图片相对于外层容器的坐标轴
8298
- getImgAxis(t, e, i) {
8299
- t = t || this.x, e = e || this.y, i = i || this.scale;
8300
- let s = {
8301
- x1: 0,
8302
- x2: 0,
8303
- y1: 0,
8304
- y2: 0
8305
- }, r = this.trueWidth * i, o = this.trueHeight * i;
8306
- switch (this.rotate) {
8307
- case 0:
8308
- s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
8309
- break;
8310
- case 1:
8311
- case -1:
8312
- case 3:
8313
- case -3:
8314
- s.x1 = t + this.trueWidth * (1 - i) / 2 + (r - o) / 2, s.x2 = s.x1 + this.trueHeight * i, s.y1 = e + this.trueHeight * (1 - i) / 2 + (o - r) / 2, s.y2 = s.y1 + this.trueWidth * i;
8315
- break;
8316
- default:
8317
- s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
8318
- break;
8319
- }
8320
- return s;
8321
- },
8322
- // 获取截图框的坐标轴
8323
- getCropAxis() {
8324
- let t = {
8325
- x1: 0,
8326
- x2: 0,
8327
- y1: 0,
8328
- y2: 0
8329
- };
8330
- return t.x1 = this.cropOffsertX, t.x2 = t.x1 + this.cropW, t.y1 = this.cropOffsertY, t.y2 = t.y1 + this.cropH, t;
8331
- },
8332
- leaveCrop(t) {
8333
- window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.$emit("crop-moving", {
8334
- moving: false,
8335
- axis: this.getCropAxis()
8336
- });
8337
- },
8338
- getCropChecked(t) {
8339
- let e = document.createElement("canvas"), i = e.getContext("2d"), s = new Image(), r = this.rotate, o = this.trueWidth, h = this.trueHeight, a = this.cropOffsertX, n = this.cropOffsertY;
8340
- s.onload = () => {
8341
- if (this.cropW !== 0) {
8342
- let p = 1;
8343
- this.high & !this.full && (p = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (p = Math.abs(Number(this.enlarge)));
8344
- let d = this.cropW * p, C = this.cropH * p, u = o * this.scale * p, g = h * this.scale * p, m = (this.x - a + this.trueWidth * (1 - this.scale) / 2) * p, v = (this.y - n + this.trueHeight * (1 - this.scale) / 2) * p;
8345
- switch (f(d, C), i.save(), r) {
8346
- case 0:
8347
- this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
8348
- s,
8349
- m / this.scale,
8350
- v / this.scale,
8351
- u / this.scale,
8352
- g / this.scale
8353
- )) : i.drawImage(s, m, v, u, g);
8354
- break;
8355
- case 1:
8356
- case -3:
8357
- this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
8358
- s,
8359
- v,
8360
- -m - g / this.scale,
8361
- u / this.scale,
8362
- g / this.scale
8363
- )) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, v, -m - g, u, g));
8364
- break;
8365
- case 2:
8366
- case -2:
8367
- this.full ? (f(d / this.scale, C / this.scale), i.rotate(r * 90 * Math.PI / 180), m = m / this.scale, v = v / this.scale, i.drawImage(
8368
- s,
8369
- -m - u / this.scale,
8370
- -v - g / this.scale,
8371
- u / this.scale,
8372
- g / this.scale
8373
- )) : (i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -m - u, -v - g, u, g));
8374
- break;
8375
- case 3:
8376
- case -1:
8377
- this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
8378
- s,
8379
- -v - u / this.scale,
8380
- m,
8381
- u / this.scale,
8382
- g / this.scale
8383
- )) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -v - u, m, u, g));
8384
- break;
8385
- default:
8386
- this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
8387
- s,
8388
- m / this.scale,
8389
- v / this.scale,
8390
- u / this.scale,
8391
- g / this.scale
8392
- )) : i.drawImage(s, m, v, u, g);
8393
- }
8394
- i.restore();
8395
- } else {
8396
- let p = o * this.scale, d = h * this.scale;
8397
- switch (i.save(), r) {
8398
- case 0:
8399
- f(p, d), i.drawImage(s, 0, 0, p, d);
8400
- break;
8401
- case 1:
8402
- case -3:
8403
- f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, 0, -d, p, d);
8404
- break;
8405
- case 2:
8406
- case -2:
8407
- f(p, d), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, -d, p, d);
8408
- break;
8409
- case 3:
8410
- case -1:
8411
- f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, 0, p, d);
8412
- break;
8413
- default:
8414
- f(p, d), i.drawImage(s, 0, 0, p, d);
8415
- }
8416
- i.restore();
8417
- }
8418
- t(e);
8419
- };
8420
- var c = this.img.substr(0, 4);
8421
- c !== "data" && (s.crossOrigin = "Anonymous"), s.src = this.imgs;
8422
- const l = this.fillColor;
8423
- function f(p, d) {
8424
- e.width = Math.round(p), e.height = Math.round(d), l && (i.fillStyle = l, i.fillRect(0, 0, e.width, e.height));
8425
- }
8426
- },
8427
- // 获取转换成base64 的图片信息
8428
- getCropData(t) {
8429
- this.getCropChecked((e) => {
8430
- t(e.toDataURL("image/" + this.outputType, this.outputSize));
8431
- });
8432
- },
8433
- //canvas获取为blob对象
8434
- getCropBlob(t) {
8435
- this.getCropChecked((e) => {
8436
- e.toBlob(
8437
- (i) => t(i),
8438
- "image/" + this.outputType,
8439
- this.outputSize
8440
- );
8441
- });
8442
- },
8443
- // 自动预览函数
8444
- showPreview() {
8445
- if (this.isCanShow)
8446
- this.isCanShow = false, setTimeout(() => {
8447
- this.isCanShow = true;
8448
- }, 16);
8449
- else
8450
- return false;
8451
- let t = this.cropW, e = this.cropH, i = this.scale;
8452
- var s = {};
8453
- s.div = {
8454
- width: `${t}px`,
8455
- height: `${e}px`
8456
- };
8457
- let r = (this.x - this.cropOffsertX) / i, o = (this.y - this.cropOffsertY) / i, h = 0;
8458
- s.w = t, s.h = e, s.url = this.imgs, s.img = {
8459
- width: `${this.trueWidth}px`,
8460
- height: `${this.trueHeight}px`,
8461
- transform: `scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)`
8462
- }, s.html = `
8463
- <div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
8464
- <div style="width: ${t}px; height: ${e}px">
8465
- <img src=${s.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
8466
- scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)">
8467
- </div>
8468
- </div>`, this.$emit("real-time", s);
8469
- },
8470
- // reload 图片布局函数
8471
- reload() {
8472
- let t = new Image();
8473
- t.onload = () => {
8474
- this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width), this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height), this.trueWidth = t.width, this.trueHeight = t.height, this.original ? this.scale = 1 : this.scale = this.checkedMode(), this.$nextTick(() => {
8475
- this.x = -(this.trueWidth - this.trueWidth * this.scale) / 2 + (this.w - this.trueWidth * this.scale) / 2, this.y = -(this.trueHeight - this.trueHeight * this.scale) / 2 + (this.h - this.trueHeight * this.scale) / 2, this.loading = false, this.autoCrop && this.goAutoCrop(), this.$emit("img-load", "success"), setTimeout(() => {
8476
- this.showPreview();
8477
- }, 20);
8478
- });
8479
- }, t.onerror = () => {
8480
- this.$emit("img-load", "error");
8481
- }, t.src = this.imgs;
8482
- },
8483
- // 背景布局的函数
8484
- checkedMode() {
8485
- let t = 1, e = this.trueWidth, i = this.trueHeight;
8486
- const s = this.mode.split(" ");
8487
- switch (s[0]) {
8488
- case "contain":
8489
- this.trueWidth > this.w && (t = this.w / this.trueWidth), this.trueHeight * t > this.h && (t = this.h / this.trueHeight);
8490
- break;
8491
- case "cover":
8492
- e = this.w, t = e / this.trueWidth, i = i * t, i < this.h && (i = this.h, t = i / this.trueHeight);
8493
- break;
8494
- default:
8495
- try {
8496
- let r = s[0];
8497
- if (r.search("px") !== -1) {
8498
- r = r.replace("px", ""), e = parseFloat(r);
8499
- const o = e / this.trueWidth;
8500
- let h = 1, a = s[1];
8501
- a.search("px") !== -1 && (a = a.replace("px", ""), i = parseFloat(a), h = i / this.trueHeight), t = Math.min(o, h);
8502
- }
8503
- if (r.search("%") !== -1 && (r = r.replace("%", ""), e = parseFloat(r) / 100 * this.w, t = e / this.trueWidth), s.length === 2 && r === "auto") {
8504
- let o = s[1];
8505
- o.search("px") !== -1 && (o = o.replace("px", ""), i = parseFloat(o), t = i / this.trueHeight), o.search("%") !== -1 && (o = o.replace("%", ""), i = parseFloat(o) / 100 * this.h, t = i / this.trueHeight);
8506
- }
8507
- } catch {
8508
- t = 1;
8509
- }
8510
- }
8511
- return t;
8512
- },
8513
- // 自动截图函数
8514
- goAutoCrop(t, e) {
8515
- if (this.imgs === "" || this.imgs === null)
8516
- return;
8517
- this.clearCrop(), this.cropping = true;
8518
- let i = this.w, s = this.h;
8519
- if (this.centerBox) {
8520
- const h = Math.abs(this.rotate) % 2 > 0;
8521
- let a = (h ? this.trueHeight : this.trueWidth) * this.scale, n = (h ? this.trueWidth : this.trueHeight) * this.scale;
8522
- i = a < i ? a : i, s = n < s ? n : s;
8523
- }
8524
- var r = t || parseFloat(this.autoCropWidth), o = e || parseFloat(this.autoCropHeight);
8525
- (r === 0 || o === 0) && (r = i * 0.8, o = s * 0.8), r = r > i ? i : r, o = o > s ? s : o, this.fixed && (o = r / this.fixedNumber[0] * this.fixedNumber[1]), o > this.h && (o = this.h, r = o / this.fixedNumber[1] * this.fixedNumber[0]), this.changeCrop(r, o);
8526
- },
8527
- // 手动改变截图框大小函数
8528
- changeCrop(t, e) {
8529
- if (this.centerBox) {
8530
- let i = this.getImgAxis();
8531
- t > i.x2 - i.x1 && (t = i.x2 - i.x1, e = t / this.fixedNumber[0] * this.fixedNumber[1]), e > i.y2 - i.y1 && (e = i.y2 - i.y1, t = e / this.fixedNumber[1] * this.fixedNumber[0]);
8532
- }
8533
- this.cropW = t, this.cropH = e, this.checkCropLimitSize(), this.$nextTick(() => {
8534
- this.cropOffsertX = (this.w - this.cropW) / 2, this.cropOffsertY = (this.h - this.cropH) / 2, this.centerBox && this.moveCrop(null, true);
8535
- });
8536
- },
8537
- // 重置函数, 恢复组件置初始状态
8538
- refresh() {
8539
- this.img, this.imgs = "", this.scale = 1, this.crop = false, this.rotate = 0, this.w = 0, this.h = 0, this.trueWidth = 0, this.trueHeight = 0, this.imgIsQqualCrop = false, this.clearCrop(), this.$nextTick(() => {
8540
- this.checkedImg();
8541
- });
8542
- },
8543
- // 向左边旋转
8544
- rotateLeft() {
8545
- this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
8546
- },
8547
- // 向右边旋转
8548
- rotateRight() {
8549
- this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;
8550
- },
8551
- // 清除旋转
8552
- rotateClear() {
8553
- this.rotate = 0;
8554
- },
8555
- // 图片坐标点校验
8556
- checkoutImgAxis(t, e, i) {
8557
- t = t || this.x, e = e || this.y, i = i || this.scale;
8558
- let s = true;
8559
- if (this.centerBox) {
8560
- let r = this.getImgAxis(t, e, i), o = this.getCropAxis();
8561
- r.x1 >= o.x1 && (s = false), r.x2 <= o.x2 && (s = false), r.y1 >= o.y1 && (s = false), r.y2 <= o.y2 && (s = false), s || this.changeImgScale(r, o, i);
8562
- }
8563
- return s;
8564
- },
8565
- // 缩放图片,将图片坐标适配截图框坐标
8566
- changeImgScale(t, e, i) {
8567
- let s = this.trueWidth, r = this.trueHeight, o = s * i, h = r * i;
8568
- if (o >= this.cropW && h >= this.cropH)
8569
- this.scale = i;
8570
- else {
8571
- const a = this.cropW / s, n = this.cropH / r, c = this.cropH <= r * a ? a : n;
8572
- this.scale = c, o = s * c, h = r * c;
8573
- }
8574
- this.imgIsQqualCrop || (t.x1 >= e.x1 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 : this.x = e.x1 - (s - o) / 2), t.x2 <= e.x2 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 - h + this.cropW : this.x = e.x2 - (s - o) / 2 - o), t.y1 >= e.y1 && (this.isRotateRightOrLeft ? this.y = e.y1 - (r - h) / 2 - (h - o) / 2 : this.y = e.y1 - (r - h) / 2), t.y2 <= e.y2 && (this.isRotateRightOrLeft ? this.y = e.y2 - (r - h) / 2 - (h - o) / 2 - o : this.y = e.y2 - (r - h) / 2 - h)), (o < this.cropW || h < this.cropH) && (this.imgIsQqualCrop = true);
8575
- }
8576
- },
8577
- mounted() {
8578
- this.support = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== void 0 ? "mousewheel" : "DOMMouseScroll";
8579
- let t = this;
8580
- var e = navigator.userAgent;
8581
- this.isIOS = !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
8582
- value: function(i, s, r) {
8583
- for (var o = atob(this.toDataURL(s, r).split(",")[1]), h = o.length, a = new Uint8Array(h), n = 0; n < h; n++)
8584
- a[n] = o.charCodeAt(n);
8585
- i(new Blob([a], { type: t.type || "image/png" }));
8586
- }
8587
- }), this.showPreview(), this.checkedImg();
8588
- },
8589
- unmounted() {
8590
- window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.cancelScale();
8591
- }
8592
- }), A = {
8593
- key: 0,
8594
- class: "cropper-box"
8595
- }, B = ["src"], P = { class: "cropper-view-box" }, R = ["src"], D = { key: 1 };
8596
- function U(t, e, i, s, r, o) {
8597
- return openBlock(), createElementBlock("div", {
8598
- class: "vue-cropper",
8599
- ref: "cropper",
8600
- onMouseover: e[28] || (e[28] = (...h) => t.scaleImg && t.scaleImg(...h)),
8601
- onMouseout: e[29] || (e[29] = (...h) => t.cancelScale && t.cancelScale(...h))
8602
- }, [
8603
- t.imgs ? (openBlock(), createElementBlock("div", A, [
8604
- withDirectives(createElementVNode("div", {
8605
- class: "cropper-box-canvas",
8606
- style: normalizeStyle({
8607
- width: t.trueWidth + "px",
8608
- height: t.trueHeight + "px",
8609
- transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + t.x / t.scale + "px," + t.y / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
8610
- })
8611
- }, [
8612
- createElementVNode("img", {
8613
- src: t.imgs,
8614
- alt: "cropper-img",
8615
- ref: "cropperImg"
8616
- }, null, 8, B)
8617
- ], 4), [
8618
- [vShow, !t.loading]
8619
- ])
8620
- ])) : createCommentVNode("", true),
8621
- createElementVNode("div", {
8622
- class: normalizeClass(["cropper-drag-box", { "cropper-move": t.move && !t.crop, "cropper-crop": t.crop, "cropper-modal": t.cropping }]),
8623
- onMousedown: e[0] || (e[0] = (...h) => t.startMove && t.startMove(...h)),
8624
- onTouchstart: e[1] || (e[1] = (...h) => t.startMove && t.startMove(...h))
8625
- }, null, 34),
8626
- withDirectives(createElementVNode("div", {
8627
- class: "cropper-crop-box",
8628
- style: normalizeStyle({
8629
- width: t.cropW + "px",
8630
- height: t.cropH + "px",
8631
- transform: "translate3d(" + t.cropOffsertX + "px," + t.cropOffsertY + "px,0)"
8632
- })
8633
- }, [
8634
- createElementVNode("span", P, [
8635
- createElementVNode("img", {
8636
- style: normalizeStyle({
8637
- width: t.trueWidth + "px",
8638
- height: t.trueHeight + "px",
8639
- transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + (t.x - t.cropOffsertX) / t.scale + "px," + (t.y - t.cropOffsertY) / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
8640
- }),
8641
- src: t.imgs,
8642
- alt: "cropper-img"
8643
- }, null, 12, R)
8644
- ]),
8645
- createElementVNode("span", {
8646
- class: "cropper-face cropper-move",
8647
- onMousedown: e[2] || (e[2] = (...h) => t.cropMove && t.cropMove(...h)),
8648
- onTouchstart: e[3] || (e[3] = (...h) => t.cropMove && t.cropMove(...h))
8649
- }, null, 32),
8650
- t.info ? (openBlock(), createElementBlock("span", {
8651
- key: 0,
8652
- class: "crop-info",
8653
- style: normalizeStyle({ top: t.cropInfo.top })
8654
- }, toDisplayString(t.cropInfo.width) + " × " + toDisplayString(t.cropInfo.height), 5)) : createCommentVNode("", true),
8655
- t.fixedBox ? createCommentVNode("", true) : (openBlock(), createElementBlock("span", D, [
8656
- createElementVNode("span", {
8657
- class: "crop-line line-w",
8658
- onMousedown: e[4] || (e[4] = (h) => t.changeCropSize(h, false, true, 0, 1)),
8659
- onTouchstart: e[5] || (e[5] = (h) => t.changeCropSize(h, false, true, 0, 1))
8660
- }, null, 32),
8661
- createElementVNode("span", {
8662
- class: "crop-line line-a",
8663
- onMousedown: e[6] || (e[6] = (h) => t.changeCropSize(h, true, false, 1, 0)),
8664
- onTouchstart: e[7] || (e[7] = (h) => t.changeCropSize(h, true, false, 1, 0))
8665
- }, null, 32),
8666
- createElementVNode("span", {
8667
- class: "crop-line line-s",
8668
- onMousedown: e[8] || (e[8] = (h) => t.changeCropSize(h, false, true, 0, 2)),
8669
- onTouchstart: e[9] || (e[9] = (h) => t.changeCropSize(h, false, true, 0, 2))
8670
- }, null, 32),
8671
- createElementVNode("span", {
8672
- class: "crop-line line-d",
8673
- onMousedown: e[10] || (e[10] = (h) => t.changeCropSize(h, true, false, 2, 0)),
8674
- onTouchstart: e[11] || (e[11] = (h) => t.changeCropSize(h, true, false, 2, 0))
8675
- }, null, 32),
8676
- createElementVNode("span", {
8677
- class: "crop-point point1",
8678
- onMousedown: e[12] || (e[12] = (h) => t.changeCropSize(h, true, true, 1, 1)),
8679
- onTouchstart: e[13] || (e[13] = (h) => t.changeCropSize(h, true, true, 1, 1))
8680
- }, null, 32),
8681
- createElementVNode("span", {
8682
- class: "crop-point point2",
8683
- onMousedown: e[14] || (e[14] = (h) => t.changeCropSize(h, false, true, 0, 1)),
8684
- onTouchstart: e[15] || (e[15] = (h) => t.changeCropSize(h, false, true, 0, 1))
8685
- }, null, 32),
8686
- createElementVNode("span", {
8687
- class: "crop-point point3",
8688
- onMousedown: e[16] || (e[16] = (h) => t.changeCropSize(h, true, true, 2, 1)),
8689
- onTouchstart: e[17] || (e[17] = (h) => t.changeCropSize(h, true, true, 2, 1))
8690
- }, null, 32),
8691
- createElementVNode("span", {
8692
- class: "crop-point point4",
8693
- onMousedown: e[18] || (e[18] = (h) => t.changeCropSize(h, true, false, 1, 0)),
8694
- onTouchstart: e[19] || (e[19] = (h) => t.changeCropSize(h, true, false, 1, 0))
8695
- }, null, 32),
8696
- createElementVNode("span", {
8697
- class: "crop-point point5",
8698
- onMousedown: e[20] || (e[20] = (h) => t.changeCropSize(h, true, false, 2, 0)),
8699
- onTouchstart: e[21] || (e[21] = (h) => t.changeCropSize(h, true, false, 2, 0))
8700
- }, null, 32),
8701
- createElementVNode("span", {
8702
- class: "crop-point point6",
8703
- onMousedown: e[22] || (e[22] = (h) => t.changeCropSize(h, true, true, 1, 2)),
8704
- onTouchstart: e[23] || (e[23] = (h) => t.changeCropSize(h, true, true, 1, 2))
8705
- }, null, 32),
8706
- createElementVNode("span", {
8707
- class: "crop-point point7",
8708
- onMousedown: e[24] || (e[24] = (h) => t.changeCropSize(h, false, true, 0, 2)),
8709
- onTouchstart: e[25] || (e[25] = (h) => t.changeCropSize(h, false, true, 0, 2))
8710
- }, null, 32),
8711
- createElementVNode("span", {
8712
- class: "crop-point point8",
8713
- onMousedown: e[26] || (e[26] = (h) => t.changeCropSize(h, true, true, 2, 2)),
8714
- onTouchstart: e[27] || (e[27] = (h) => t.changeCropSize(h, true, true, 2, 2))
8715
- }, null, 32)
8716
- ]))
8717
- ], 4), [
8718
- [vShow, t.cropping]
8719
- ])
8720
- ], 544);
8721
- }
8722
- const M = /* @__PURE__ */ $(z, [["render", U], ["__scopeId", "data-v-a742df44"]]);
8723
-
8724
7636
  const imageUploadProProps = {
8725
7637
  /**
8726
7638
  * 已上传图片列表(用于回显)
@@ -9127,17 +8039,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9127
8039
  }
9128
8040
  });
9129
8041
  return (_ctx, _cache) => {
9130
- const _component_el_button = resolveComponent("el-button");
9131
- const _component_el_upload = resolveComponent("el-upload");
9132
- const _component_el_image = resolveComponent("el-image");
8042
+ const _component_vue_cropper = resolveComponent("vue-cropper");
9133
8043
  const _component_el_option = resolveComponent("el-option");
9134
- const _component_el_select = resolveComponent("el-select");
9135
- const _component_el_form_item = resolveComponent("el-form-item");
9136
- const _component_el_col = resolveComponent("el-col");
9137
- const _component_el_input_number = resolveComponent("el-input-number");
9138
- const _component_el_row = resolveComponent("el-row");
9139
- const _component_el_form = resolveComponent("el-form");
9140
- const _component_el_dialog = resolveComponent("el-dialog");
9141
8044
  return openBlock(), createElementBlock(
9142
8045
  "div",
9143
8046
  {
@@ -9145,7 +8048,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9145
8048
  },
9146
8049
  [
9147
8050
  createCommentVNode(" \u6838\u5FC3\u4E0A\u4F20\u533A\u57DF "),
9148
- createVNode(_component_el_upload, {
8051
+ createVNode(unref(ElUpload), {
9149
8052
  ref_key: "uploadRef",
9150
8053
  ref: uploadRef,
9151
8054
  class: normalizeClass(unref(bem)("image-upload-pro", "upload-container")),
@@ -9183,7 +8086,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9183
8086
  )
9184
8087
  ]),
9185
8088
  default: withCtx(() => [
9186
- createVNode(_component_el_button, {
8089
+ createVNode(unref(ElButton), {
9187
8090
  disabled: fileList.value.length === props.maxCount,
9188
8091
  type: "primary"
9189
8092
  }, {
@@ -9228,9 +8131,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9228
8131
  class: normalizeClass(unref(bem)("image-upload-pro", "preview-img"))
9229
8132
  },
9230
8133
  [
9231
- createVNode(_component_el_image, {
8134
+ createVNode(unref(ElImage), {
9232
8135
  src: item.url,
9233
- "preview-src-list": previewList.value.map((i) => i.url),
8136
+ "preview-src-list": previewList.value.filter((i) => i.url).map((i) => i.url),
9234
8137
  "preview-current-index": index,
9235
8138
  fit: "cover"
9236
8139
  }, null, 8, ["src", "preview-src-list", "preview-current-index"])
@@ -9245,7 +8148,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9245
8148
  class: normalizeClass(unref(bem)("image-upload-pro", "preview-actions"))
9246
8149
  },
9247
8150
  [
9248
- createVNode(_component_el_button, {
8151
+ createVNode(unref(ElButton), {
9249
8152
  type: "primary",
9250
8153
  text: "",
9251
8154
  size: "small",
@@ -9261,7 +8164,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9261
8164
  _: 1
9262
8165
  /* STABLE */
9263
8166
  }, 8, ["onClick"]),
9264
- createVNode(_component_el_button, {
8167
+ createVNode(unref(ElButton), {
9265
8168
  text: "",
9266
8169
  size: "small",
9267
8170
  type: "danger",
@@ -9291,7 +8194,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9291
8194
  /* CLASS */
9292
8195
  )) : createCommentVNode("v-if", true),
9293
8196
  createCommentVNode(" \u88C1\u526A\u5F39\u7A97 "),
9294
- createVNode(_component_el_dialog, {
8197
+ createVNode(unref(ElDialog), {
9295
8198
  modelValue: cropDialogVisible.value,
9296
8199
  "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => cropDialogVisible.value = $event),
9297
8200
  title: "\u56FE\u7247\u88C1\u526A",
@@ -9301,7 +8204,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9301
8204
  onClose: resetCropper
9302
8205
  }, {
9303
8206
  footer: withCtx(() => [
9304
- createVNode(_component_el_button, {
8207
+ createVNode(unref(ElButton), {
9305
8208
  onClick: _cache[4] || (_cache[4] = ($event) => cropDialogVisible.value = false)
9306
8209
  }, {
9307
8210
  default: withCtx(() => [..._cache[10] || (_cache[10] = [
@@ -9314,7 +8217,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9314
8217
  _: 1
9315
8218
  /* STABLE */
9316
8219
  }),
9317
- createVNode(_component_el_button, {
8220
+ createVNode(unref(ElButton), {
9318
8221
  type: "primary",
9319
8222
  onClick: handleCropConfirm
9320
8223
  }, {
@@ -9337,7 +8240,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9337
8240
  },
9338
8241
  [
9339
8242
  createCommentVNode(" \u88C1\u526A\u533A\u57DF "),
9340
- createVNode(unref(M), {
8243
+ createVNode(_component_vue_cropper, {
9341
8244
  ref_key: "cropperRef",
9342
8245
  ref: cropperRef,
9343
8246
  img: cropImageUrl.value,
@@ -9362,15 +8265,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9362
8265
  class: normalizeClass(unref(bem)("image-upload-pro", "cropper-config"))
9363
8266
  },
9364
8267
  [
9365
- createVNode(_component_el_form, { model: cropForm }, {
8268
+ createVNode(unref(ElForm), { model: cropForm }, {
9366
8269
  default: withCtx(() => [
9367
- createVNode(_component_el_row, { gutter: 10 }, {
8270
+ createVNode(unref(ElRow), { gutter: 10 }, {
9368
8271
  default: withCtx(() => [
9369
- createVNode(_component_el_col, { span: 8 }, {
8272
+ createVNode(unref(ElCol), { span: 8 }, {
9370
8273
  default: withCtx(() => [
9371
- createVNode(_component_el_form_item, { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
8274
+ createVNode(unref(ElFormItem), { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
9372
8275
  default: withCtx(() => [
9373
- createVNode(_component_el_select, {
8276
+ createVNode(unref(ElSelect), {
9374
8277
  style: { "width": "100%" },
9375
8278
  modelValue: cropForm.aspectRatio,
9376
8279
  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cropForm.aspectRatio = $event),
@@ -9402,11 +8305,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9402
8305
  _: 1
9403
8306
  /* STABLE */
9404
8307
  }),
9405
- createVNode(_component_el_col, { span: 16 }, {
8308
+ createVNode(unref(ElCol), { span: 16 }, {
9406
8309
  default: withCtx(() => [
9407
- createVNode(_component_el_form_item, { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
8310
+ createVNode(unref(ElFormItem), { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
9408
8311
  default: withCtx(() => [
9409
- createVNode(_component_el_input_number, {
8312
+ createVNode(unref(ElInputNumber), {
9410
8313
  modelValue: displayWidth.value,
9411
8314
  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => displayWidth.value = $event),
9412
8315
  placeholder: "\u5BBD\u5EA6",
@@ -9420,7 +8323,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
9420
8323
  -1
9421
8324
  /* CACHED */
9422
8325
  )),
9423
- createVNode(_component_el_input_number, {
8326
+ createVNode(unref(ElInputNumber), {
9424
8327
  modelValue: displayHeight.value,
9425
8328
  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => displayHeight.value = $event),
9426
8329
  placeholder: "\u9AD8\u5EA6",