epic-designer/dist/ui/naiveUi/upload-image/uploadImage.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";const a=require("vue");;/* empty css                                       */require("vuedraggable");const f=require("../../../utils/src/common/string.cjs");require("@vueuse/core");require("../../../hooks/src/store/index.cjs");const m=require("naive-ui"),h=a.defineComponent({emits:["update:modelValue","change"],props:{modelValue:{default:"",type:String}},setup(s,{attrs:u,emit:l}){const i=a.ref([]);let r="";a.watch(()=>i.value,e=>{r=e.filter(t=>t.status==="finished").map(t=>t.url).join(","),l("update:modelValue",r),l("change",r)}),a.watch(()=>s.modelValue,e=>{if(r!==e){if(e===""){i.value=[];return}e!==null&&i.value!==null&&(i.value=e.split(",").map(t=>({id:f.getUUID(),name:t,status:"finished",url:t})))}},{immediate:!0});function o(e){a.nextTick(()=>{i.value=e})}const c=({event:e,file:t})=>{var n;const p=e==null?void 0:e.target,g=JSON.parse(p.response??"{}");t.url=(n=g.data)==null?void 0:n.url},d=({event:e,file:t})=>{console.log("OnError called->",t,e)};return()=>a.h("div",{class:"epic-upload-image"},{default:()=>[a.h(m.NUpload,{...u,accept:"image/gif,image/jpeg,image/jpg,image/png,image/svg",onError:d,onFinish:c,"file-list":i.value,"list-type":"image-card","onUpdate:file-list":o},{default:()=>[a.h("div",{style:{"text-align":"center"}},{default:()=>[a.h("span",{class:"icon--epic icon--epic--cloud-upload-outlined text-md mr-2px text-lg"}),a.h("div",{class:"ant-upload-text"},{default:()=>"点击上传"})]})]})]})}});module.exports=h;