@web-utils/component 2.7.20 → 2.7.22

package/dist/components/image-cropper/index.js

@@ -1,144 +1,155 @@
-import { w as s } from "../../chunks/util.23fe58fb.js";
-import { VueCropper as a } from "vue-cropper";
-import { n as p } from "../../chunks/vueComponentNormalizer.71e2aa87.js";
-import f from "vue";
-var l = function() {
-  var e = this, o = e.$createElement, t = e._self._c || o;
-  return t("ElementDialog", {
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b))
+      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
+  return a;
+};
+import { z as dataURLtoFile } from "../../chunks/util.89913643.js";
+import { VueCropper } from "vue-cropper";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import Vue from "vue";
+var render = function() {
+  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  return _c("ElementDialog", {
     staticClass: "avue-cropper",
     attrs: {
-      visible: e.visible,
-      "before-close": e.cancel,
+      visible: _vm.visible,
+      "before-close": _vm.cancel,
       title: "图片剪裁",
       "close-on-press-escape": !1,
       "close-on-click-modal": !1,
-      "modal-append-to-body": e.$AVUE.modalAppendToBody,
-      "append-to-body": e.$AVUE.appendToBody,
+      "modal-append-to-body": _vm.$AVUE.modalAppendToBody,
+      "append-to-body": _vm.$AVUE.appendToBody,
       width: "1000px"
     },
     on: {
-      "update:visible": function(i) {
-        e.visible = i;
+      "update:visible": function($event) {
+        _vm.visible = $event;
       }
     },
-    scopedSlots: e._u([{
+    scopedSlots: _vm._u([{
       key: "footer",
       fn: function() {
-        return [t("ElButton", {
+        return [_c("ElButton", {
           attrs: {
             size: "small",
             type: "primary"
           },
           on: {
-            click: e.submit
+            click: _vm.submit
           }
-        }, [e._v(" 确 定 ")]), t("ElButton", {
+        }, [_vm._v(" 确 定 ")]), _c("ElButton", {
           attrs: {
             size: "small"
           },
           on: {
-            click: function(i) {
-              return e.cancel();
+            click: function($event) {
+              return _vm.cancel();
             }
           }
-        }, [e._v(" 取 消 ")])];
+        }, [_vm._v(" 取 消 ")])];
       },
       proxy: !0
     }])
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "cropper-content"
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "cropper-box"
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "cropper"
-  }, [t("VueCropper", {
+  }, [_c("VueCropper", {
     ref: "cropper",
     attrs: {
-      img: e.option.img,
-      "output-size": e.option.outputSize,
-      "output-type": e.option.outputType,
-      info: e.option.info,
-      "can-scale": e.option.canScale,
-      "auto-crop": e.option.autoCrop,
-      "auto-crop-width": e.option.autoCropWidth,
-      "auto-crop-height": e.option.autoCropHeight,
-      fixed: e.option.fixed,
-      "fixed-number": e.option.fixedNumber,
-      full: e.option.full,
-      "fixed-box": e.option.fixedBox,
-      "can-move": e.option.canMove,
-      "can-move-box": e.option.canMoveBox,
-      original: e.option.original,
-      "center-box": e.option.centerBox,
-      height: e.option.height,
-      "info-true": e.option.infoTrue,
-      "max-img-size": e.option.maxImgSize,
-      enlarge: e.option.enlarge,
-      mode: e.option.mode
+      img: _vm.option.img,
+      "output-size": _vm.option.outputSize,
+      "output-type": _vm.option.outputType,
+      info: _vm.option.info,
+      "can-scale": _vm.option.canScale,
+      "auto-crop": _vm.option.autoCrop,
+      "auto-crop-width": _vm.option.autoCropWidth,
+      "auto-crop-height": _vm.option.autoCropHeight,
+      fixed: _vm.option.fixed,
+      "fixed-number": _vm.option.fixedNumber,
+      full: _vm.option.full,
+      "fixed-box": _vm.option.fixedBox,
+      "can-move": _vm.option.canMove,
+      "can-move-box": _vm.option.canMoveBox,
+      original: _vm.option.original,
+      "center-box": _vm.option.centerBox,
+      height: _vm.option.height,
+      "info-true": _vm.option.infoTrue,
+      "max-img-size": _vm.option.maxImgSize,
+      enlarge: _vm.option.enlarge,
+      mode: _vm.option.mode
     },
     on: {
-      realTime: e.realTime
+      realTime: _vm.realTime
     }
-  })], 1), t("div", {
+  })], 1), _c("div", {
     staticClass: "footer-btn"
-  }, [t("ElButton", {
+  }, [_c("ElButton", {
     attrs: {
       size: "mini",
       type: "danger",
       icon: "el-icon-zoom-in"
     },
     on: {
-      click: function(i) {
-        return e.changeScale(1);
+      click: function($event) {
+        return _vm.changeScale(1);
       }
     }
-  }), t("ElButton", {
+  }), _c("ElButton", {
     attrs: {
       size: "mini",
       type: "danger",
       icon: "el-icon-zoom-out"
     },
     on: {
-      click: function(i) {
-        return e.changeScale(-1);
+      click: function($event) {
+        return _vm.changeScale(-1);
       }
     }
-  }), t("ElButton", {
+  }), _c("ElButton", {
     attrs: {
       size: "mini",
       icon: "el-icon-back",
       type: "danger"
     },
     on: {
-      click: e.rotateLeft
+      click: _vm.rotateLeft
     }
-  }), t("ElButton", {
+  }), _c("ElButton", {
     attrs: {
       size: "mini",
       type: "danger",
       icon: "el-icon-right"
     },
     on: {
-      click: e.rotateRight
+      click: _vm.rotateRight
     }
-  })], 1)]), t("div", {
+  })], 1)]), _c("div", {
     staticClass: "show-preview"
-  }, [t("div", {
+  }, [_c("div", {
     staticClass: "preview",
-    style: e.previews.div
-  }, [t("img", {
-    style: e.previews.img,
+    style: _vm.previews.div
+  }, [_c("img", {
+    style: _vm.previews.img,
     attrs: {
-      src: e.previews.url,
+      src: _vm.previews.url,
       alt: ""
     }
   })])])])]);
-}, c = [];
-const h = {
+}, staticRenderFns = [];
+const __vue2_script$1 = {
   name: "ImageCropper",
-  imageCropper: u,
+  imageCropper,
   components: {
-    VueCropper: a
+    VueCropper
   },
   data() {
     return {
@@ -152,8 +163,8 @@ const h = {
       this.visible = !0;
     },
     // 图片缩放
-    changeScale(e) {
-      e = e || 1, this.$refs.cropper.changeScale(e);
+    changeScale(num) {
+      num = num || 1, this.$refs.cropper.changeScale(num);
     },
     // 向左旋转
     rotateLeft() {
@@ -164,38 +175,38 @@ const h = {
       this.$refs.cropper.rotateRight();
     },
     // 实时预览函数
-    realTime(e) {
-      this.previews = e;
+    realTime(data) {
+      this.previews = data;
     },
     submit() {
-      this.visible = !1, this.$refs.cropper.getCropData((e) => {
-        let o = e;
-        this.option.type === "file" && (o = s(e, `${new Date().getTime()}.${this.option.outputType}`)), this.option.callback && this.option.callback(o);
+      this.visible = !1, this.$refs.cropper.getCropData((data) => {
+        let result = data;
+        this.option.type === "file" && (result = dataURLtoFile(data, `${new Date().getTime()}.${this.option.outputType}`)), this.option.callback && this.option.callback(result);
       });
     },
-    cancel(e) {
-      e && e(), this.visible = !1, this.option.cancel && this.option.cancel(), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
+    cancel(done) {
+      done && done(), this.visible = !1, this.option.cancel && this.option.cancel(), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
     }
   }
-}, n = {};
-var m = /* @__PURE__ */ p(
-  h,
-  l,
-  c,
+}, __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  __vue2_script$1,
+  render,
+  staticRenderFns,
   !1,
-  v,
+  __vue2_injectStyles$1,
   null,
   null,
   null
 );
-function v(e) {
-  for (let o in n)
-    this[o] = n[o];
+function __vue2_injectStyles$1(context) {
+  for (let o in __cssModules$1)
+    this[o] = __cssModules$1[o];
 }
-const d = /* @__PURE__ */ function() {
-  return m.exports;
-}(), u = (e = {}) => {
-  const o = f.extend(d), t = {
+const ImageCropper$1 = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}(), imageCropper = (ops = {}) => {
+  const ImageCropperConstructor = Vue.extend(ImageCropper$1), option = __spreadValues({
     outputSize: 1,
     // 裁剪生成图片的质量(可选0.1 - 1)
     outputType: "jpeg",
@@ -224,20 +235,18 @@ const d = /* @__PURE__ */ function() {
     // 是否按照设备的dpr 输出等比例图片
     infoTrue: !1,
     // true为展示真实输出图片宽高，false展示看到的截图框宽高
-    enlarge: 1,
-    // 图片根据截图框输出比例倍数
-    ...e
-  }, i = new o({
+    enlarge: 1
+  }, ops), instance = new ImageCropperConstructor({
     data: {
-      option: t
+      option
     }
   }).$mount();
-  return document.body.appendChild(i.$el), i.show(), i;
-}, g = {
+  return document.body.appendChild(instance.$el), instance.show(), instance;
+}, __vue2_script = {
   name: "ImageCropper",
-  imageCropper: u,
+  imageCropper,
   components: {
-    VueCropper: a
+    VueCropper
   },
   data() {
     return {
@@ -251,8 +260,8 @@ const d = /* @__PURE__ */ function() {
       this.visible = !0;
     },
     // 图片缩放
-    changeScale(e) {
-      e = e || 1, this.$refs.cropper.changeScale(e);
+    changeScale(num) {
+      num = num || 1, this.$refs.cropper.changeScale(num);
     },
     // 向左旋转
     rotateLeft() {
@@ -263,37 +272,37 @@ const d = /* @__PURE__ */ function() {
       this.$refs.cropper.rotateRight();
     },
     // 实时预览函数
-    realTime(e) {
-      this.previews = e;
+    realTime(data) {
+      this.previews = data;
     },
     submit() {
-      this.visible = !1, this.$refs.cropper.getCropData((e) => {
-        let o = e;
-        this.option.type === "file" && (o = s(e, `${new Date().getTime()}.${this.option.outputType}`)), this.option.callback && this.option.callback(o);
+      this.visible = !1, this.$refs.cropper.getCropData((data) => {
+        let result = data;
+        this.option.type === "file" && (result = dataURLtoFile(data, `${new Date().getTime()}.${this.option.outputType}`)), this.option.callback && this.option.callback(result);
       });
     },
-    cancel(e) {
-      e && e(), this.visible = !1, this.option.cancel && this.option.cancel(), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
+    cancel(done) {
+      done && done(), this.visible = !1, this.option.cancel && this.option.cancel(), typeof this.option.beforeClose == "function" && this.option.beforeClose(), this.$destroy(), this.$el.remove();
     }
   }
-}, r = {};
-var _ = /* @__PURE__ */ p(
-  g,
-  l,
-  c,
+}, __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
   !1,
-  b,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function b(e) {
-  for (let o in r)
-    this[o] = r[o];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules)
+    this[o] = __cssModules[o];
 }
-const w = /* @__PURE__ */ function() {
-  return _.exports;
+const ImageCropper = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  w as default
+  ImageCropper as default
 };