mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
347 lines • 22.6 kB
JavaScript
function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) {
return lhs;
}
else {
return rhsFn();
} }
/* Analyzed bindings: {
"dragger": "props",
"Upload": "setup-maybe-ref",
"UploadDragger": "setup-maybe-ref",
"CloseCircleFilled": "setup-maybe-ref",
"StarOutlined": "setup-maybe-ref",
"useSlots": "setup-const",
"uploadProps": "setup-maybe-ref",
"uploadListProps": "setup-maybe-ref",
"props": "setup-reactive-const",
"preview": "setup-const",
"$slots": "setup-maybe-ref"
} */
import { defineComponent as _defineComponent } from 'vue';
import { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, Fragment as _Fragment, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots } from "vue";
import _imports_0 from '../Upload/asset/uploadIcon.svg';
import _imports_1 from './asset/picture-upload-fail.svg';
import _imports_2 from '../Upload/asset/uploadRemoveIcon.svg';
import _imports_3 from '../Upload/asset/Group.svg';
const _hoisted_1 = {
key: 0,
class: "drag-container"
};
const _hoisted_2 = {
key: 0,
class: "upload-inner"
};
const _hoisted_3 = { class: "upload-inner-context" };
const _hoisted_4 = { class: "upload-list-item-info" };
const _hoisted_5 = { class: "upload-span" };
const _hoisted_6 = { key: 0 };
const _hoisted_7 = {
key: 1,
class: "previewIcon",
src: _imports_0
};
const _hoisted_8 = ["src"];
const _hoisted_9 = {
key: 2,
class: "picture-img",
src: _imports_1
};
const _hoisted_10 = {
key: 2,
class: "tips"
};
const _hoisted_11 = { style: { "min-width": "20px" } };
const _hoisted_12 = ["onClick"];
const _hoisted_13 = {
key: 1,
src: _imports_2
};
const _hoisted_14 = { key: 0 };
const _hoisted_15 = { key: 1 };
const _hoisted_16 = {
key: 0,
class: "error-pic"
};
const _hoisted_17 = /*#__PURE__*/ _createElementVNode("div", { style: { "padding": "10px" } }, [
/*#__PURE__*/ _createElementVNode("img", { src: _imports_3 })
], -1 /* HOISTED */);
const _hoisted_18 = [
_hoisted_17
];
const _hoisted_19 = ["src"];
const _hoisted_20 = {
key: 0,
class: "upload-inner"
};
const _hoisted_21 = { class: "upload-inner-context" };
const _hoisted_22 = { class: "upload-list-item-info" };
const _hoisted_23 = { class: "upload-span" };
const _hoisted_24 = { key: 0 };
const _hoisted_25 = {
key: 1,
class: "previewIcon",
src: _imports_0
};
const _hoisted_26 = ["src", "onClick"];
const _hoisted_27 = {
key: 2,
class: "picture-img",
src: _imports_1
};
const _hoisted_28 = {
key: 2,
class: "tips"
};
const _hoisted_29 = { style: { "min-width": "20px" } };
const _hoisted_30 = ["onClick"];
const _hoisted_31 = {
key: 1,
src: _imports_2
};
const _hoisted_32 = { key: 0 };
import { Upload, UploadDragger } from 'ant-design-vue';
import { useSlots } from 'vue';
import { uploadProps, uploadListProps, } from 'ant-design-vue/lib/upload/interface';
const __sfc_main__ = _defineComponent({
props: {
...uploadProps(),
...uploadListProps(),
dragger: {
type: Boolean,
default: false,
},
},
setup(__props) {
const props = __props;
//上传图片点击缩略图预览
const preview = (url) => {
window.open(url);
};
const $slots = useSlots();
return (_ctx, _cache) => {
const _component_a_progress = _resolveComponent("a-progress");
return (__props.dragger)
? (_openBlock(), _createElementBlock("div", _hoisted_1, [
_createVNode(_unref(UploadDragger), _normalizeProps(_guardReactiveProps(props)), _createSlots({
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default")
]),
_: 2 /* DYNAMIC */
}, [
(props.listType !== 'picture-card')
? {
name: "itemRender",
fn: _withCtx(({ file, actions, fileList, originNode }) => [
_renderSlot(_ctx.$slots, "itemRender", {
file: file,
actions: actions,
fileList: fileList,
originNode: originNode
}, () => [
(!_unref($slots).itemRender)
? (_openBlock(), _createElementBlock("div", _hoisted_2, [
_createElementVNode("div", _hoisted_3, [
_createElementVNode("div", _hoisted_4, [
_createElementVNode("div", _hoisted_5, [
_createCommentVNode("自定义上传缩略图"),
(props.listType !== 'picture')
? (_openBlock(), _createElementBlock("div", _hoisted_6, [
(_unref($slots).iconRender)
? _renderSlot(_ctx.$slots, "iconRender", { key: 0 })
: (_openBlock(), _createElementBlock("img", _hoisted_7))
]))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode("图片上传"),
_createElementVNode("div", null, [
_createElementVNode("span", null, [
(_unref($slots).iconRender)
? _renderSlot(_ctx.$slots, "iconRender", { key: 0 })
: _createCommentVNode("v-if", true),
(!_unref($slots).iconRender &&
file.status === 'done')
? (_openBlock(), _createElementBlock("img", {
key: 1,
class: "picture-img",
src: _nullishCoalesce(file.url, () => (file.thumbUrl))
}, null, 8 /* PROPS */, _hoisted_8))
: _createCommentVNode("v-if", true),
(file.status === 'error')
? (_openBlock(), _createElementBlock("img", _hoisted_9))
: _createCommentVNode("v-if", true)
])
])
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
_createElementVNode("span", {
class: "file-name",
style: _normalizeStyle(file.status === 'error'
? 'color: red'
: '')
}, _toDisplayString(file.name), 5 /* TEXT, STYLE */),
(file.status === 'uploading')
? (_openBlock(), _createElementBlock("span", _hoisted_10, " 已上传" + _toDisplayString(parseInt(file.percent)) + "% ", 1 /* TEXT */))
: (_openBlock(), _createElementBlock("span", {
key: 3,
class: "tips",
style: _normalizeStyle(file.status === 'error'
? 'color: red'
: '')
}, _toDisplayString(file.status === 'error'
? '上传失败'
: '上传成功'), 5 /* TEXT, STYLE */)),
_createElementVNode("div", _hoisted_11, [
_createCommentVNode("自定义上传删除icon"),
_createElementVNode("span", {
class: "img-remove",
onClick: actions.remove
}, [
(_unref($slots).removeIcon)
? _renderSlot(_ctx.$slots, "removeIcon", { key: 0 })
: (_openBlock(), _createElementBlock("img", _hoisted_13))
], 8 /* PROPS */, _hoisted_12)
])
])
])
]),
(file.status === 'uploading')
? (_openBlock(), _createElementBlock("div", _hoisted_14, [
_createVNode(_component_a_progress, {
class: "upload-progress",
percent: file.percent,
"show-info": false,
size: "small"
}, null, 8 /* PROPS */, ["percent"])
]))
: _createCommentVNode("v-if", true)
]))
: _createCommentVNode("v-if", true)
])
]),
key: "0"
}
: undefined
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */)
]))
: (_openBlock(), _createElementBlock("div", _hoisted_15, [
_createVNode(_unref(Upload), _normalizeProps(_guardReactiveProps(props)), _createSlots({
default: _withCtx(() => [
_renderSlot(_ctx.$slots, "default")
]),
_: 2 /* DYNAMIC */
}, [
(props.listType === 'picture-card')
? {
name: "iconRender",
fn: _withCtx(({ file }) => [
_renderSlot(_ctx.$slots, "iconRender", {}, () => [
(file.status === 'error')
? (_openBlock(), _createElementBlock("div", _hoisted_16, _hoisted_18))
: _createCommentVNode("v-if", true),
(file.status === 'uploading')
? (_openBlock(), _createElementBlock("img", {
key: 1,
src: _nullishCoalesce(file.url, () => (file.thumbUrl))
}, null, 8 /* PROPS */, _hoisted_19))
: _createCommentVNode("v-if", true)
])
]),
key: "0"
}
: undefined,
(props.listType !== 'picture-card')
? {
name: "itemRender",
fn: _withCtx(({ file, actions, fileList, originNode }) => [
_renderSlot(_ctx.$slots, "itemRender", {
file: file,
actions: actions,
fileList: fileList,
originNode: originNode
}, () => [
(!_unref($slots).itemRender)
? (_openBlock(), _createElementBlock("div", _hoisted_20, [
_createElementVNode("div", _hoisted_21, [
_createElementVNode("div", _hoisted_22, [
_createElementVNode("div", _hoisted_23, [
_createCommentVNode("自定义上传缩略图"),
(props.listType !== 'picture')
? (_openBlock(), _createElementBlock("div", _hoisted_24, [
(_unref($slots).iconRender)
? _renderSlot(_ctx.$slots, "iconRender", { key: 0 })
: (_openBlock(), _createElementBlock("img", _hoisted_25))
]))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createCommentVNode("图片上传"),
_createElementVNode("div", null, [
_createElementVNode("span", null, [
(_unref($slots).iconRender)
? _renderSlot(_ctx.$slots, "iconRender", { key: 0 })
: _createCommentVNode("v-if", true),
(!_unref($slots).iconRender &&
file.status === 'done')
? (_openBlock(), _createElementBlock("img", {
key: 1,
class: "picture-img",
src: _nullishCoalesce(file.url, () => (file.thumbUrl)),
onClick: ($event) => (preview(_nullishCoalesce(file.url, () => (file.thumbUrl))))
}, null, 8 /* PROPS */, _hoisted_26))
: _createCommentVNode("v-if", true),
(file.status === 'error')
? (_openBlock(), _createElementBlock("img", _hoisted_27))
: _createCommentVNode("v-if", true)
])
])
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
_createElementVNode("span", {
class: "file-name",
style: _normalizeStyle(file.status === 'error'
? 'color: red'
: '')
}, _toDisplayString(file.name), 5 /* TEXT, STYLE */),
(file.status === 'uploading')
? (_openBlock(), _createElementBlock("span", _hoisted_28, " 已上传" + _toDisplayString(parseInt(file.percent)) + "% ", 1 /* TEXT */))
: (_openBlock(), _createElementBlock("span", {
key: 3,
class: "tips",
style: _normalizeStyle(file.status === 'error'
? 'color: red'
: '')
}, _toDisplayString(file.status === 'error'
? '上传失败'
: '上传成功'), 5 /* TEXT, STYLE */)),
_createElementVNode("div", _hoisted_29, [
_createCommentVNode("自定义上传删除icon"),
_createElementVNode("span", {
class: "img-remove",
onClick: actions.remove
}, [
(_unref($slots).removeIcon)
? _renderSlot(_ctx.$slots, "removeIcon", { key: 0 })
: (_openBlock(), _createElementBlock("img", _hoisted_31))
], 8 /* PROPS */, _hoisted_30)
])
])
])
]),
(file.status === 'uploading')
? (_openBlock(), _createElementBlock("div", _hoisted_32, [
_createVNode(_component_a_progress, {
class: "upload-progress",
percent: file.percent,
"show-info": false,
size: "small"
}, null, 8 /* PROPS */, ["percent"])
]))
: _createCommentVNode("v-if", true)
]))
: _createCommentVNode("v-if", true)
])
]),
key: "1"
}
: undefined
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */)
]));
};
}
});
export default __sfc_main__;