@web-utils/component 2.7.29 → 2.7.31

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

@@ -1,31 +1,21 @@
-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 { z as dataURLtoFile } from "../../chunks/util.b0d0b0ad.js";
 import { VueCropper } from "vue-cropper";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
-import Vue from "vue";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.js";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("ElementDialog", {
     staticClass: "avue-cropper",
     attrs: {
-      visible: _vm.visible,
+      "visible": _vm.visible,
       "before-close": _vm.cancel,
-      title: "图片剪裁",
-      "close-on-press-escape": !1,
-      "close-on-click-modal": !1,
+      "title": "图片剪裁",
+      "close-on-press-escape": false,
+      "close-on-click-modal": false,
       "modal-append-to-body": _vm.$AVUE.modalAppendToBody,
       "append-to-body": _vm.$AVUE.appendToBody,
-      width: "1000px"
+      "width": "1000px"
     },
     on: {
       "update:visible": function($event) {
@@ -37,24 +27,24 @@ var render = function() {
       fn: function() {
         return [_c("ElButton", {
           attrs: {
-            size: "small",
-            type: "primary"
+            "size": "small",
+            "type": "primary"
           },
           on: {
-            click: _vm.submit
+            "click": _vm.submit
           }
         }, [_vm._v(" 确 定 ")]), _c("ElButton", {
           attrs: {
-            size: "small"
+            "size": "small"
           },
           on: {
-            click: function($event) {
+            "click": function($event) {
               return _vm.cancel();
             }
           }
         }, [_vm._v(" 取 消 ")])];
       },
-      proxy: !0
+      proxy: true
     }])
   }, [_c("div", {
     staticClass: "cropper-content"
@@ -65,72 +55,72 @@ var render = function() {
   }, [_c("VueCropper", {
     ref: "cropper",
     attrs: {
-      img: _vm.option.img,
+      "img": _vm.option.img,
       "output-size": _vm.option.outputSize,
       "output-type": _vm.option.outputType,
-      info: _vm.option.info,
+      "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": _vm.option.fixed,
       "fixed-number": _vm.option.fixedNumber,
-      full: _vm.option.full,
+      "full": _vm.option.full,
       "fixed-box": _vm.option.fixedBox,
       "can-move": _vm.option.canMove,
       "can-move-box": _vm.option.canMoveBox,
-      original: _vm.option.original,
+      "original": _vm.option.original,
       "center-box": _vm.option.centerBox,
-      height: _vm.option.height,
+      "height": _vm.option.height,
       "info-true": _vm.option.infoTrue,
       "max-img-size": _vm.option.maxImgSize,
-      enlarge: _vm.option.enlarge,
-      mode: _vm.option.mode
+      "enlarge": _vm.option.enlarge,
+      "mode": _vm.option.mode
     },
     on: {
-      realTime: _vm.realTime
+      "realTime": _vm.realTime
     }
   })], 1), _c("div", {
     staticClass: "footer-btn"
   }, [_c("ElButton", {
     attrs: {
-      size: "mini",
-      type: "danger",
-      icon: "el-icon-zoom-in"
+      "size": "mini",
+      "type": "danger",
+      "icon": "el-icon-zoom-in"
     },
     on: {
-      click: function($event) {
+      "click": function($event) {
         return _vm.changeScale(1);
       }
     }
   }), _c("ElButton", {
     attrs: {
-      size: "mini",
-      type: "danger",
-      icon: "el-icon-zoom-out"
+      "size": "mini",
+      "type": "danger",
+      "icon": "el-icon-zoom-out"
     },
     on: {
-      click: function($event) {
+      "click": function($event) {
         return _vm.changeScale(-1);
       }
     }
   }), _c("ElButton", {
     attrs: {
-      size: "mini",
-      icon: "el-icon-back",
-      type: "danger"
+      "size": "mini",
+      "icon": "el-icon-back",
+      "type": "danger"
     },
     on: {
-      click: _vm.rotateLeft
+      "click": _vm.rotateLeft
     }
   }), _c("ElButton", {
     attrs: {
-      size: "mini",
-      type: "danger",
-      icon: "el-icon-right"
+      "size": "mini",
+      "type": "danger",
+      "icon": "el-icon-right"
     },
     on: {
-      click: _vm.rotateRight
+      "click": _vm.rotateRight
     }
   })], 1)]), _c("div", {
     staticClass: "show-preview"
@@ -140,128 +130,34 @@ var render = function() {
   }, [_c("img", {
     style: _vm.previews.img,
     attrs: {
-      src: _vm.previews.url,
-      alt: ""
+      "src": _vm.previews.url,
+      "alt": ""
     }
   })])])])]);
-}, staticRenderFns = [];
-const __vue2_script$1 = {
-  name: "ImageCropper",
-  imageCropper,
-  components: {
-    VueCropper
-  },
-  data() {
-    return {
-      visible: !1,
-      previews: {},
-      option: {}
-    };
-  },
-  methods: {
-    show() {
-      this.visible = !0;
-    },
-    // 图片缩放
-    changeScale(num) {
-      num = num || 1, this.$refs.cropper.changeScale(num);
-    },
-    // 向左旋转
-    rotateLeft() {
-      this.$refs.cropper.rotateLeft();
-    },
-    // 向右旋转
-    rotateRight() {
-      this.$refs.cropper.rotateRight();
-    },
-    // 实时预览函数
-    realTime(data) {
-      this.previews = data;
-    },
-    submit() {
-      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(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();
-    }
-  }
-}, __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(
-  __vue2_script$1,
-  render,
-  staticRenderFns,
-  !1,
-  __vue2_injectStyles$1,
-  null,
-  null,
-  null
-);
-function __vue2_injectStyles$1(context) {
-  for (let o in __cssModules$1)
-    this[o] = __cssModules$1[o];
-}
-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",
-    // 裁剪生成图片的格式（jpeg || png || webp）
-    info: !0,
-    // 图片大小信息
-    canScale: !0,
-    // 图片是否允许滚轮缩放
-    autoCrop: !0,
-    // 是否默认生成截图框
-    fixed: !1,
-    // 是否开启截图框宽高固定比例
-    full: !1,
-    // false按原比例裁切图片，不失真
-    fixedBox: !1,
-    // 固定截图框大小，不允许改变
-    canMove: !0,
-    // 上传图片是否可以移动
-    canMoveBox: !0,
-    // 截图框能否拖动
-    original: !1,
-    // 上传图片按照原始比例渲染
-    centerBox: !1,
-    // 截图框是否被限制在图片里面
-    height: !0,
-    // 是否按照设备的dpr 输出等比例图片
-    infoTrue: !1,
-    // true为展示真实输出图片宽高，false展示看到的截图框宽高
-    enlarge: 1
-  }, ops), instance = new ImageCropperConstructor({
-    data: {
-      option
-    }
-  }).$mount();
-  return document.body.appendChild(instance.$el), instance.show(), instance;
-}, __vue2_script = {
+};
+var staticRenderFns = [];
+const ImageCropper_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "ImageCropper",
-  imageCropper,
+  // imageCropper,
   components: {
     VueCropper
   },
   data() {
     return {
-      visible: !1,
+      visible: false,
       previews: {},
       option: {}
     };
   },
   methods: {
     show() {
-      this.visible = !0;
+      this.visible = true;
     },
     // 图片缩放
     changeScale(num) {
-      num = num || 1, this.$refs.cropper.changeScale(num);
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
     },
     // 向左旋转
     rotateLeft() {
@@ -276,29 +172,42 @@ const ImageCropper$1 = /* @__PURE__ */ function() {
       this.previews = data;
     },
     submit() {
-      this.visible = !1, this.$refs.cropper.getCropData((data) => {
+      this.visible = false;
+      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);
+        if (this.option.type === "file") {
+          result = dataURLtoFile(data, `${new Date().getTime()}.${this.option.outputType}`);
+        }
+        this.option.callback && this.option.callback(result);
       });
     },
     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();
+      done && done();
+      this.visible = false;
+      this.option.cancel && this.option.cancel();
+      if (typeof this.option.beforeClose === "function") {
+        this.option.beforeClose();
+      }
+      this.$destroy();
+      this.$el.remove();
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const ImageCropper = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/image-cropper/style.css

@@ -1 +1,34 @@
-.avue-cropper .cropper-content{display:flex;justify-content:flex-end}.avue-cropper .cropper-content .cropper-box{flex:1;width:100%}.avue-cropper .cropper-content .cropper-box .cropper{width:auto;height:300px}.avue-cropper .cropper-content .show-preview{flex:1;display:flex;justify-content:center}.avue-cropper .cropper-content .show-preview .preview{overflow:hidden;border:1px solid #67c23a;background:#cccccc}.avue-cropper .cropper-content .footer-btn{margin-top:30px;display:flex;justify-content:center;padding-right:10px}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.avue-cropper .cropper-content {
+  display: flex;
+  justify-content: flex-end;
+}
+.avue-cropper .cropper-content .cropper-box {
+  flex: 1;
+  width: 100%;
+}
+.avue-cropper .cropper-content .cropper-box .cropper {
+  width: auto;
+  height: 300px;
+}
+.avue-cropper .cropper-content .show-preview {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+.avue-cropper .cropper-content .show-preview .preview {
+  overflow: hidden;
+  border: 1px solid #67c23a;
+  background: #cccccc;
+}
+.avue-cropper .cropper-content .footer-btn {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  padding-right: 10px;
+}