yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
219 lines (218 loc) • 7.58 kB
JavaScript
import { defineComponent, ref, shallowRef, watch, markRaw, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
import { ElButtonGroup, ElButton, ElUpload } from "element-plus";
import { ZoomInOutlined, ZoomOutOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowUpOutlined, ArrowDownOutlined, UndoOutlined, ReloadOutlined, SwapOutlined, SortOutlined, SyncOutlined, UploadOutlined, CheckOutlined } from "../../icons";
import { useTimer } from "../../utils/hook";
import { useLocale } from "../../ele-config-provider/receiver";
import EleTooltip from "../../ele-tooltip/index";
const TOOL_ICONS = {
zoomIn: ZoomInOutlined,
zoomOut: ZoomOutOutlined,
moveLeft: ArrowLeftOutlined,
moveRight: ArrowRightOutlined,
moveUp: ArrowUpOutlined,
moveDown: ArrowDownOutlined,
rotateLeft: UndoOutlined,
rotateRight: ReloadOutlined,
flipX: SwapOutlined,
flipY: SortOutlined,
reset: SyncOutlined,
upload: UploadOutlined,
ok: CheckOutlined
};
const _sfc_main = defineComponent({
name: "CropperTools",
components: { ElButtonGroup, ElButton, 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 } = useLocale("cropper", props);
const [startHideTipTimer, stopHideTipTimer] = useTimer(200);
const tooltipRef = ref(null);
const groups = shallowRef([]);
const tooltipContent = ref("");
const virtualRef = 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();
}
};
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: 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 = resolveComponent("ElButton");
const _component_ElUpload = resolveComponent("ElUpload");
const _component_ElButtonGroup = resolveComponent("ElButtonGroup");
const _component_EleTooltip = resolveComponent("EleTooltip");
return openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.groups, (group) => {
return openBlock(), createBlock(_component_ElButtonGroup, {
key: group.key,
class: "ele-cropper-tool-item"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
return openBlock(), createElementBlock(Fragment, {
key: item.key
}, [
item.name === "upload" ? (openBlock(), createBlock(_component_ElUpload, {
key: 0,
action: "",
accept: _ctx.accept,
showFileList: false,
beforeUpload: _ctx.handleUpload,
style: { "display": "inline-block", "line-height": "0" }
}, {
default: withCtx(() => [
createVNode(_component_ElButton, {
type: "primary",
icon: item.icon,
class: 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"])) : (openBlock(), createBlock(_component_ElButton, {
key: 1,
type: "primary",
icon: item.icon,
class: normalizeClass(["ele-cropper-tool", item.className]),
onMouseover: (e) => _ctx.handleItemHover(item, e),
onClick: ($event) => _ctx.handleClick(item.name)
}, {
default: withCtx(() => [
item.name === "ok" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createTextVNode(toDisplayString(_ctx.lang.ok), 1)
], 64)) : createCommentVNode("", true)
]),
_: 2
}, 1032, ["icon", "class", "onMouseover", "onClick"]))
], 64);
}), 128))
]),
_: 2
}, 1024);
}), 128)),
createVNode(_component_EleTooltip, 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]]);
export {
cropperTools as default
};