epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 1.61 kB
JavaScript
;const r=require("vue");;/* empty css */require("vuedraggable");const w=require("../../../utils/src/common/string.cjs");require("@vueuse/core");require("../../../hooks/src/store/index.cjs");const u=require("element-plus"),x=r.defineComponent({emits:["update:modelValue"],props:{modelValue:{default:"",type:String}},setup(p,{attrs:d,emit:g}){const s=r.ref([]);let a="";const l=r.ref(""),i=r.ref(!1),n=e=>{i.value=e};r.watch(()=>s.value,e=>{a=e.filter(t=>t.status==="success").map(t=>t.url).join(","),g("update:modelValue",a)}),r.watch(()=>p.modelValue,e=>{if(a!==e){if(e===""){s.value=[];return}e&&s.value&&(s.value=e.split(",").map(t=>({name:t,status:"success",uid:Number(w.getUUID(10,"number")),url:t})))}},{deep:!0,immediate:!0});const m=()=>{},f=e=>{e.url&&(l.value=e.url,n(!0))},v=(e,t,b)=>{s.value=b.map(o=>{var c;return{...o,url:(c=o.response.data)==null?void 0:c.url}})},h=e=>{u.ElMessage.error("上传失败"),console.error(e)},q=()=>{},U=r.computed(()=>({...d,accept:"image/gif,image/jpeg,image/jpg,image/png,image/svg",onBeforeUpload:q,onChange:m,onError:h,onPreview:f,onSuccess:v,"file-list":s.value,"list-type":"picture-card"}));return()=>r.h("div",{class:"epic-upload-image"},{default:()=>[r.h(u.ElUpload,U.value,{default:()=>[r.h("div",{style:{"text-align":"center"}},{default:()=>[r.h("span",{class:"icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"}),r.h("div",{class:"ant-upload-text"},{default:()=>"点击上传"})]})]}),(()=>{if(i.value)return r.h(u.ElImageViewer,{onClose:()=>{n(!1)},urlList:[l.value]})})()]})}});module.exports=x;