yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
218 lines (217 loc) • 7.47 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const hook = require("../../utils/hook");
const receiver = require("../../ele-config-provider/receiver");
const EleTooltip = require("../../ele-tooltip/index");
const TOOL_ICONS = {
zoomIn: icons.ZoomInOutlined,
zoomOut: icons.ZoomOutOutlined,
moveLeft: icons.ArrowLeftOutlined,
moveRight: icons.ArrowRightOutlined,
moveUp: icons.ArrowUpOutlined,
moveDown: icons.ArrowDownOutlined,
rotateLeft: icons.UndoOutlined,
rotateRight: icons.ReloadOutlined,
flipX: icons.SwapOutlined,
flipY: icons.SortOutlined,
reset: icons.SyncOutlined,
upload: icons.UploadOutlined,
ok: icons.CheckOutlined
};
const _sfc_main = vue.defineComponent({
name: "CropperTools",
components: { ElButtonGroup: elementPlus.ElButtonGroup, ElButton: elementPlus.ElButton, ElUpload: elementPlus.ElUpload, EleTooltip },
props: {
/** 操作按钮布局 */
tools: String,
/** 允许上传的图片类型 */
accept: String,
/** 是否需要提示组件 */
tooltip: Boolean,
/** 提示组件属性 */
tooltipProps: Object,
/** 上传按钮点击前的钩子 */
beforeUploadClick: Function,
/** 国际化 */
locale: Object
},
emits: {
zoomIn: () => true,
zoomOut: () => true,
moveLeft: () => true,
moveRight: () => true,
moveUp: () => true,
moveDown: () => true,
rotateLeft: () => true,
rotateRight: () => true,
flipX: () => true,
flipY: () => true,
reset: () => true,
upload: (_option) => true,
ok: () => true
},
setup(props, { emit }) {
const { lang } = receiver.useLocale("cropper", props);
const [startHideTipTimer, stopHideTipTimer] = hook.useTimer(200);
const tooltipRef = vue.ref(null);
const groups = vue.shallowRef([]);
const tooltipContent = vue.ref("");
const virtualRef = vue.ref();
const emitUpload = (data, type) => {
emit("upload", { data, type });
};
const handleUpload = (file) => {
const reader = new FileReader();
reader.onload = (e) => {
var _a;
const url = (_a = e.target) == null ? void 0 : _a.result;
if (url != null) {
emitUpload(url, file.type);
}
};
reader.readAsDataURL(file);
return false;
};
const hideTooltip = () => {
tooltipRef.value && tooltipRef.value.hide();
};
const handleItemHover = (item, e) => {
const title = lang.value[item.name];
if (props.tooltip && item.name !== "ok" && title) {
stopHideTipTimer();
virtualRef.value = e.currentTarget;
tooltipContent.value = title;
}
};
const handleClick = (name) => {
startHideTipTimer(() => {
hideTooltip();
});
emit(name);
};
const handleUploadButtonClick = (e) => {
startHideTipTimer(() => {
hideTooltip();
});
if (props.beforeUploadClick && props.beforeUploadClick(e, emitUpload) === false) {
e.stopPropagation();
e.preventDefault();
}
};
vue.watch(
() => props.tools,
(tools) => {
if (!tools) {
groups.value = [];
return;
}
const names = Object.keys(TOOL_ICONS);
groups.value = tools.split("|").filter((g) => !!g.trim()).map((g, i) => {
const items = g.split(",").filter((t) => {
const name = t.trim();
return name && names.includes(name);
}).map((t, j) => {
const name = t.trim();
return {
key: i + "-" + j + name,
name,
icon: vue.markRaw(TOOL_ICONS[name]),
className: `ele-cropper-${name}`
};
});
return { key: i + g, items };
});
},
{ immediate: true }
);
return {
lang,
tooltipRef,
groups,
tooltipContent,
virtualRef,
handleUpload,
handleClick,
handleItemHover,
handleUploadButtonClick
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = { class: "ele-cropper-tools" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_ElButton = vue.resolveComponent("ElButton");
const _component_ElUpload = vue.resolveComponent("ElUpload");
const _component_ElButtonGroup = vue.resolveComponent("ElButtonGroup");
const _component_EleTooltip = vue.resolveComponent("EleTooltip");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.groups, (group) => {
return vue.openBlock(), vue.createBlock(_component_ElButtonGroup, {
key: group.key,
class: "ele-cropper-tool-item"
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: item.key
}, [
item.name === "upload" ? (vue.openBlock(), vue.createBlock(_component_ElUpload, {
key: 0,
action: "",
accept: _ctx.accept,
showFileList: false,
beforeUpload: _ctx.handleUpload,
style: { "display": "inline-block", "line-height": "0" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ElButton, {
type: "primary",
icon: item.icon,
class: vue.normalizeClass(["ele-cropper-tool", item.className]),
onMouseover: (e) => _ctx.handleItemHover(item, e),
onClick: _ctx.handleUploadButtonClick
}, null, 8, ["icon", "class", "onMouseover", "onClick"])
]),
_: 2
}, 1032, ["accept", "beforeUpload"])) : (vue.openBlock(), vue.createBlock(_component_ElButton, {
key: 1,
type: "primary",
icon: item.icon,
class: vue.normalizeClass(["ele-cropper-tool", item.className]),
onMouseover: (e) => _ctx.handleItemHover(item, e),
onClick: ($event) => _ctx.handleClick(item.name)
}, {
default: vue.withCtx(() => [
item.name === "ok" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createTextVNode(vue.toDisplayString(_ctx.lang.ok), 1)
], 64)) : vue.createCommentVNode("", true)
]),
_: 2
}, 1032, ["icon", "class", "onMouseover", "onClick"]))
], 64);
}), 128))
]),
_: 2
}, 1024);
}), 128)),
vue.createVNode(_component_EleTooltip, vue.mergeProps({
placement: "top",
offset: 6
}, _ctx.tooltipProps || {}, {
content: _ctx.tooltipContent,
virtualRef: _ctx.virtualRef,
virtualTriggering: true,
ref: "tooltipRef"
}), null, 16, ["content", "virtualRef"])
]);
}
const cropperTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = cropperTools;