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