gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 1.24 kB
JavaScript
;const l=require("vue"),o=require("element-plus"),x=l.defineComponent({props:{modelValue:{type:Array,default:()=>[]}},emits:["update:modelValue"],setup(i,{emit:c,attrs:d}){const t=l.ref([]),u=l.ref(""),r=l.ref(!1),s=e=>{r.value=e};l.watch(t,e=>{c("update:modelValue",e)}),l.watch(()=>i.modelValue,e=>{if(e!=null&&e.length>0&&t.value!=null){if(t.value===e)return;t.value.length=0,t.value.push(...e)}},{deep:!0,immediate:!0});const p=(e,a)=>{l.nextTick(()=>{t.value=a})},g=(e,a,n)=>{console.log(n)},f=(e,a,n)=>{o.ElMessage.error("上传失败"),console.error(e)},m=e=>{},v=l.computed(()=>({...d,"file-list":t.value,"list-type":"picture-card",accept:"image/gif,image/jpeg,image/jpg,image/png,image/svg",onBeforeUpload:m,onChange:p,onSuccess:g,onError:f,onPreview:h})),h=e=>{e.url&&(u.value=e.url,s(!0))};return()=>l.h("div",{class:"epic-upload-image"},{default:()=>[l.h(o.ElUpload,v.value,{default:()=>[l.h("div",{style:{"text-align":"center"}},{default:()=>[l.h("span",{class:"icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"}),l.h("div",{class:"ant-upload-text"},{default:()=>"点击上传"})]})]}),(()=>{if(r.value)return l.h(o.ElImageViewer,{urlList:[u.value],onClose:()=>{s(!1)}})})()]})}});module.exports=x;