xiaoyu
165 lines
7.0 KiB
JavaScript
165 lines
7.0 KiB
JavaScript
import Locale from "element-ui/lib/mixins/locale";
|
|
function normalizeComponent(scriptExports, render2, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
|
|
var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
|
|
if (render2) {
|
|
options.render = render2;
|
|
options.staticRenderFns = staticRenderFns;
|
|
options._compiled = true;
|
|
}
|
|
if (functionalTemplate) {
|
|
options.functional = true;
|
|
}
|
|
if (scopeId) {
|
|
options._scopeId = "data-v-" + scopeId;
|
|
}
|
|
var hook;
|
|
if (moduleIdentifier) {
|
|
hook = function(context) {
|
|
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
|
|
if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
|
|
context = __VUE_SSR_CONTEXT__;
|
|
}
|
|
if (injectStyles) {
|
|
injectStyles.call(this, context);
|
|
}
|
|
if (context && context._registeredComponents) {
|
|
context._registeredComponents.add(moduleIdentifier);
|
|
}
|
|
};
|
|
options._ssrRegister = hook;
|
|
} else if (injectStyles) {
|
|
hook = shadowMode ? function() {
|
|
injectStyles.call(
|
|
this,
|
|
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
);
|
|
} : injectStyles;
|
|
}
|
|
if (hook) {
|
|
if (options.functional) {
|
|
options._injectStyles = hook;
|
|
var originalRender = options.render;
|
|
options.render = function renderWithStyleInjection(h, context) {
|
|
hook.call(context);
|
|
return originalRender(h, context);
|
|
};
|
|
} else {
|
|
var existing = options.beforeCreate;
|
|
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
}
|
|
}
|
|
return {
|
|
exports: scriptExports,
|
|
options
|
|
};
|
|
}
|
|
const _sfc_main = {
|
|
name: "CropperTools",
|
|
mixins: [Locale],
|
|
props: {
|
|
tools: String,
|
|
accept: String,
|
|
okText: String
|
|
},
|
|
emits: [
|
|
"crop",
|
|
"move-b",
|
|
"move-l",
|
|
"move-r",
|
|
"move-t",
|
|
"reset",
|
|
"rotate-l",
|
|
"rotate-r",
|
|
"scale-x",
|
|
"scale-y",
|
|
"replace",
|
|
"zoom-in",
|
|
"zoom-out"
|
|
],
|
|
computed: {
|
|
groups() {
|
|
var _a;
|
|
if (!this.tools) {
|
|
return [];
|
|
}
|
|
return (_a = this.tools.split("|")) == null ? void 0 : _a.map((g) => {
|
|
var _a2;
|
|
return (_a2 = g == null ? void 0 : g.split(",")) == null ? void 0 : _a2.map((t) => t == null ? void 0 : t.trim());
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
zoomIn() {
|
|
this.$emit("zoom-in");
|
|
},
|
|
zoomOut() {
|
|
this.$emit("zoom-out");
|
|
},
|
|
scaleX() {
|
|
this.$emit("scale-x");
|
|
},
|
|
scaleY() {
|
|
this.$emit("scale-y");
|
|
},
|
|
rotateL() {
|
|
this.$emit("rotate-l");
|
|
},
|
|
rotateR() {
|
|
this.$emit("rotate-r");
|
|
},
|
|
moveL() {
|
|
this.$emit("move-l");
|
|
},
|
|
moveR() {
|
|
this.$emit("move-r");
|
|
},
|
|
moveT() {
|
|
this.$emit("move-t");
|
|
},
|
|
moveB() {
|
|
this.$emit("move-b");
|
|
},
|
|
reset() {
|
|
this.$emit("reset");
|
|
},
|
|
crop() {
|
|
this.$emit("crop");
|
|
},
|
|
onUpload(file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
var _a;
|
|
this.$emit("replace", {
|
|
data: (_a = e.target) == null ? void 0 : _a.result,
|
|
type: file.type
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
var _sfc_render = function render() {
|
|
var _vm = this, _c = _vm._self._c;
|
|
return _c("div", { staticClass: "ele-cropper-tool" }, _vm._l(_vm.groups, function(buttons, i) {
|
|
return _c("el-button-group", { key: i + buttons.join(","), staticClass: "ele-cropper-tool-item" }, [_vm._l(buttons, function(name, j) {
|
|
return [name === "zoomIn" ? _c("el-button", { key: i + "-" + j + "zoomIn", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-zoom-in", "title": _vm.t("ele.cropper.zoomIn") }, on: { "click": _vm.zoomIn } }) : name === "zoomOut" ? _c("el-button", { key: i + "-" + j + "zoomOut", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-zoom-out", "title": _vm.t("ele.cropper.zoomOut") }, on: { "click": _vm.zoomOut } }) : name === "rotateL" ? _c("el-button", { key: i + "-" + j + "rotateL", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh-left", "title": _vm.t("ele.cropper.rotateLeft") }, on: { "click": _vm.rotateL } }) : name === "rotateR" ? _c("el-button", { key: i + "-" + j + "rotateR", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh-right", "title": _vm.t("ele.cropper.rotateRight") }, on: { "click": _vm.rotateR } }) : name === "moveL" ? _c("el-button", { key: i + "-" + j + "moveL", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-back", "title": _vm.t("ele.cropper.moveLeft") }, on: { "click": _vm.moveL } }) : name === "moveR" ? _c("el-button", { key: i + "-" + j + "moveR", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-right", "title": _vm.t("ele.cropper.moveRight") }, on: { "click": _vm.moveR } }) : name === "moveT" ? _c("el-button", { key: i + "-" + j + "moveT", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-top", "title": _vm.t("ele.cropper.moveUp") }, on: { "click": _vm.moveT } }) : name === "moveB" ? _c("el-button", { key: i + "-" + j + "moveB", attrs: { "type": "primary", "icon": "el-icon-bottom", "title": _vm.t("ele.cropper.moveDown") }, on: { "click": _vm.moveB } }) : name === "scaleX" ? _c("el-button", { key: i + "-" + j + "scaleX", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-sort ele-cropper-icon-scale-x", "title": _vm.t("ele.cropper.flipX") }, on: { "click": _vm.scaleX } }) : name === "scaleY" ? _c("el-button", { key: i + "-" + j + "scaleY", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-sort", "title": _vm.t("ele.cropper.flipY") }, on: { "click": _vm.scaleY } }) : name === "reset" ? _c("el-button", { key: i + "-" + j + "reset", staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-refresh", "title": _vm.t("ele.cropper.reset") }, on: { "click": _vm.reset } }) : name === "upload" ? _c("el-upload", { key: i + "-" + j + "upload", attrs: { "action": "", "accept": _vm.accept, "show-file-list": false, "before-upload": _vm.onUpload } }, [_c("el-button", { staticClass: "ele-cropper-tool-btn", attrs: { "type": "primary", "icon": "el-icon-upload2", "title": _vm.t("ele.cropper.upload") } })], 1) : name === "crop" ? _c("el-button", { key: i + "-" + j + "crop", attrs: { "type": "primary", "icon": "el-icon-check" }, on: { "click": _vm.crop } }, [_vm._v(" " + _vm._s(_vm.okText || _vm.t("ele.cropper.ok")) + " ")]) : _vm._e()];
|
|
})], 2);
|
|
}), 1);
|
|
};
|
|
var _sfc_staticRenderFns = [];
|
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
|
_sfc_main,
|
|
_sfc_render,
|
|
_sfc_staticRenderFns,
|
|
false,
|
|
null,
|
|
null,
|
|
null,
|
|
null
|
|
);
|
|
const cropperTools = __component__.exports;
|
|
export {
|
|
cropperTools as default
|
|
};
|