uv-ui
Version:
基于vue3的移动端组件库
2 lines (1 loc) • 4.28 kB
JavaScript
;const e=require("vue"),g=require("../icon/index.cjs"),i=require("./utils.cjs"),w=require("../../utils/type.cjs");require("./uploader.vue_vue_type_style_index_0_lang.cjs");const b={class:"uv-uploader"},S={class:"uv-uploader-wrapper"},z=["onClick","src"],F={key:0,class:"uv-uploader-mask"},R={key:0,class:"uv-uploader-uploading-wrapper"},A=e.createElementVNode("div",{class:"uv-uploader-uploading"},null,-1),x={key:1,class:"uv-uploader-failed-wrapper"},I=["onClick"],U=e.createElementVNode("div",{class:"uv-uploader-delete-shadow"},null,-1),j={class:"uv-uploader-upload"},q=["disabled"],P={name:"UvUploader"},D=Object.assign(P,{props:{disabled:{type:Boolean,default:!1},deletable:{type:Boolean,default:!0},maxCount:{type:[Number,String,Function],default:1/0},maxSize:{type:Number,default:1/0},beforeRead:{type:Function},afterRead:{type:Function},modelValue:{type:Array,default:()=>[]},resultType:{type:String,default:"dataUrl"},previewImage:{type:Boolean,default:!0}},emits:["oversize","clickUpload","clickPreview","delete","update:modelValue"],setup(r,{emit:c}){const a=r,V=l=>c("clickUpload",l),B=l=>c("clickPreview",l),p=e.ref(),v=e.ref(-1),f=()=>{p.value&&(p.value.value="")},u=(l=a.modelValue.length)=>({name:a.name,index:l}),k=l=>{if(f(),i.isOversize(l,a.maxSize))if(Array.isArray(l)){const o=i.filterFiles(l,a.maxSize);if(l=o.valid,c("oversize",o.invalid,u()),!l.length)return}else{c("oversize",l,u());return}if(l=e.reactive(l),v.value>-1){const o=[...a.modelValue];o.splice(v.value,1,l),c("update:modelValue",o),v.value=-1}else c("update:modelValue",[...a.modelValue,...i.toArray(l)]);a.afterRead&&a.afterRead(l,u())},m=l=>{const{maxCount:o,modelValue:t,resultType:s}=a;if(Array.isArray(l)){const n=+o-t.length;console.log(n),l.length>n&&(l=l.slice(0,n)),Promise.all(l.map(d=>i.readFileContent(d,s))).then(d=>{const C=l.map((E,y)=>{const h={file:E,status:"",message:""};return d[y]&&(h.content=d[y]),h});k(C)})}else i.readFileContent(l,s).then(n=>{const d={file:l,status:"",message:""};n&&(d.content=n),k(d)})},N=l=>{const{files:o}=l.target;if(a.disabled||!o||!o.length)return;const t=o.length===1?o[0]:[].slice.call(o);if(a.beforeRead){const s=a.beforeRead(t,u());if(!s){f();return}if(w.isPromise(s)){s.then(n=>{m(n||t)}).catch(f);return}}m(t)},_=(l,o)=>{const t=a.modelValue.slice(0);t.splice(o,1),c("update:modelValue",t),c("delete",l,u(o))};return(l,o)=>(e.openBlock(),e.createElementBlock("div",b,[e.createElementVNode("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.modelValue,(t,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[r.modelValue&&r.previewImage?(e.openBlock(),e.createElementBlock("div",{class:"uv-uploader-img-wrapper",key:s},[e.createElementVNode("img",{onClick:n=>B(t),src:t.content||t.url,class:"uv-uploader-img"},null,8,z),t.status==="uploading"||t.status==="failed"?(e.openBlock(),e.createElementBlock("div",F,[t.status==="uploading"?(e.openBlock(),e.createElementBlock("div",R,[A,e.createElementVNode("div",null,e.toDisplayString(t.message||"\u4E0A\u4F20\u4E2D..."),1)])):e.createCommentVNode("",!0),t.status==="failed"?(e.openBlock(),e.createElementBlock("div",x,[e.createVNode(e.unref(g),{size:"22",name:"close",color:"#fff"}),e.createElementVNode("div",null,e.toDisplayString(t.message||"\u4E0A\u4F20\u5931\u8D25"),1)])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),t.status!=="uploading"&&r.deletable?(e.openBlock(),e.createElementBlock("div",{key:1,onClick:n=>_(t,s),class:"uv-uploader-delete"},[e.renderSlot(l.$slots,"preview-delete",{},()=>[U,e.createVNode(e.unref(g),{class:"uv-uploader-delete-icon",size:"14",name:"close",color:"#fff"})])],8,I)):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"preview-cover",{item:t,file:t.file})])):e.createCommentVNode("",!0)],64))),256)),e.withDirectives(e.createElementVNode("div",{class:"uv-uploader-upload-wrapper",onClick:V},[e.renderSlot(l.$slots,"default",{},()=>[e.createElementVNode("div",j,[e.createVNode(e.unref(g),{size:"26",name:"photograph",color:r.disabled?"#edeeef":"#dcdee0"},null,8,["color"])])]),e.createElementVNode("input",{ref_key:"inputRef",ref:p,class:"uv-uploader-input",type:"file",disabled:r.disabled,onChange:N},null,40,q)],512),[[e.vShow,!(r.modelValue.length>=+r.maxCount)]])])]))}});module.exports=D;