gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 1.95 kB
JavaScript
;const t=require("vue"),n=require("ant-design-vue"),w={class:"epic-upload-image"},C={key:0},b=t.defineComponent({__name:"uploadImage",props:{modelValue:{type:Array,default:()=>[]},maxCount:{type:Number}},emits:["update:modelValue","change"],setup(d,{emit:m}){const g=t.useAttrs(),s=d,i=m,r=t.ref([]),o=t.ref(""),c=t.ref(!1),p=e=>{c.value=e};t.watch(r,e=>{i("update:modelValue",e),i("change",e)}),t.watch(()=>s.modelValue,e=>{if(e!=null&&e.length>0&&r.value!=null){if(r.value===e)return;r.value.length=0,r.value.push(...e)}},{deep:!0,immediate:!0});function f(e){t.nextTick(()=>{r.value=e})}const v=e=>{var l,a;if(e.file.status!=="uploading"){if(e.file.status==="done"){const u=(a=(l=e.file.response)==null?void 0:l.data)==null?void 0:a.url;if(!e.file.url&&!u){e.file.status="error",n.message.error("上传失败");return}e.file.url=u,e.file.thumbUrl=u}e.file.status==="error"&&n.message.error("upload error")}},h=e=>{},V=t.computed(()=>({...g,"list-type":"picture-card",accept:"image/gif,image/jpeg,image/jpg,image/png,image/svg","onUpdate:file-list":f,"file-list":r.value,"onBefore-upload":h,onChange:v,onPreview:x}));function x(e){e.url&&(o.value=e.url,p(!0))}function _(){o.value&&n.message.error("图片地址无法访问!")}return(e,l)=>(t.openBlock(),t.createElementBlock("div",w,[t.createVNode(t.unref(n.Upload),t.normalizeProps(t.guardReactiveProps(V.value)),{default:t.withCtx(()=>{var a;return[(((a=r.value)==null?void 0:a.length)??0)<(s.maxCount??999)?(t.openBlock(),t.createElementBlock("div",C,l[0]||(l[0]=[t.createElementVNode("span",{class:"icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg text-$epic-text-main"},null,-1),t.createElementVNode("div",{class:"ant-upload-text"}," 点击上传 ",-1)]))):t.createCommentVNode("",!0)]}),_:1},16),t.createVNode(t.unref(n.Image),{style:{display:"none"},src:o.value,preview:{visible:c.value,onVisibleChange:p},onError:_},null,8,["src","preview"])]))}});module.exports=b;