全栈小学生 af883ac9e1 update
2024-08-06 17:54:17 +08:00

2 lines
5.2 KiB
JavaScript

import{d as P,M as B,l as g,ag as Z,r as E,an as G,aG as h,h as a,c as r,a as i,n as K,aC as _,u as s,e as o,z as v,aK as q,m as L,w as D,t as F,k as N,F as w,O as A,B as O,C as H,aL as J,ah as T}from"./index-ad4e42d5.js";/* empty css */import{_ as Q}from"./index.vue_vue_type_style_index_0_lang-32b12c72.js";import{_ as U}from"./index.vue_vue_type_script_setup_true_lang-39123e55.js";/* empty css */import{S as W}from"./sortable.esm-be94e56d.js";import{_ as X}from"./_plugin-vue_export-helper-c27b6911.js";/* empty css *//* empty css *//* empty css */import"./attachment-621e6518.js";/* empty css */import"./index.vue_vue_type_script_setup_true_lang-4946e851.js";/* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import"./el-tooltip-4ed993c7.js";/* empty css *//* empty css *//* empty css */import"./index.vue_vue_type_script_setup_true_lang-9334503d.js";/* empty css */import"./sys-747f9e8e.js";const Y={class:"flex flex-wrap"},ee={key:0,class:"w-full h-full relative"},te={class:"w-full h-full flex items-center justify-center"},ie={class:"absolute z-[1] flex items-center justify-center w-full h-full inset-0 bg-black bg-opacity-60 operation"},le={class:"w-full h-full flex items-center justify-center flex-col content-wrap"},ae={class:"leading-none text-xs mt-[10px] text-secondary"},oe={class:"w-full h-full relative"},ne={class:"w-full h-full flex items-center justify-center"},se={class:"absolute z-[1] flex items-center justify-center w-full h-full inset-0 bg-black bg-opacity-60 operation"},re={class:"w-full h-full flex items-center justify-center flex-col content-wrap"},ce={class:"leading-none text-xs mt-[10px] text-secondary"},de=P({__name:"index",props:{type:{type:String,default:"image"},imageFit:{type:String,default:"contain"},modelValue:{type:String,default:""},width:{type:String,default:"100px"},height:{type:String,default:"100px"},imageText:{type:String},limit:{type:Number,default:1}},emits:["update:modelValue","change"],setup(l,{emit:y}){const c=l,d=B({get(){return c.modelValue},set(e){y("update:modelValue",e)}}),t=g({data:[]});let b=g([]);const f=()=>{d.value=T(t.data).toString(),b=T(t.data).map(e=>e.indexOf("data:image")!=-1?e:v(e))};Z(()=>d.value,()=>{d.value.indexOf("data:image")!=-1?t.data=[d.value]:t.data=[...d.value.split(",").filter(e=>e)],f()},{immediate:!0});const x=B(()=>({width:c.width,height:c.height})),k=e=>{c.limit==1?(t.data.splice(0,1),e&&t.data.push(e.url)):(e.forEach(n=>{t.data.length<c.limit&&t.data.push(n.url)}),h(()=>{I()})),f(),h(()=>{y("change",d.value)})},C=(e=0)=>{t.data.splice(e,1),f()},u=g({show:!1,index:0}),z=(e=0)=>{u.show=!0,u.index=e},S=E(null);G(()=>{h(()=>{I()})}),E([]);const I=()=>{c.limit!=1&&W.create(S.value,{group:"image-wrap",animation:300,onEnd:e=>{const n=t.data[e.oldIndex];t.data.splice(e.oldIndex,1),t.data.splice(e.newIndex,0,n),f()}})};return(e,n)=>{const V=H,m=U,j=Q,M=J;return a(),r(w,null,[i("div",Y,[l.limit==1?(a(),r("div",{key:0,class:K(["rounded cursor-pointer overflow-hidden relative border border-solid border-color image-wrap mr-[10px]",{"rounded-full":l.type=="avatar"}]),style:_(s(x))},[t.data.length?(a(),r("div",ee,[i("div",te,[o(V,{class:"w-full h-full",src:t.data[0].indexOf("data:image")!=-1?t.data[0]:s(v)(t.data[0]),fit:l.imageFit},null,8,["src","fit"])]),i("div",ie,[o(m,{name:"element ZoomIn",color:"#fff",size:"18px",class:"mr-[10px]",onClick:n[0]||(n[0]=p=>z())}),o(m,{name:"element Delete",color:"#fff",size:"18px",onClick:q(C,["stop"])},null,8,["onClick"])])])):(a(),L(j,{key:1,limit:l.limit,onConfirm:k},{default:D(()=>[i("div",le,[o(m,{name:"element Plus",size:"20px",color:"var(--el-text-color-secondary)"}),i("div",ae,F(l.imageText||s(N)("upload.root")),1)])]),_:1},8,["limit"]))],6)):(a(),r(w,{key:1},[i("div",{class:"flex flex-wrap",ref_key:"imgListRef",ref:S},[(a(!0),r(w,null,A(t.data,(p,$)=>(a(),r("div",{class:"rounded cursor-pointer overflow-hidden relative border border-solid border-color image-wrap mr-[10px]",style:_(s(x)),key:p},[i("div",oe,[i("div",ne,[o(V,{src:s(v)(p),fit:"contain"},null,8,["src"])]),i("div",se,[o(m,{name:"element ZoomIn",color:"#fff",size:"18px",class:"mr-[10px]",onClick:R=>z($)},null,8,["onClick"]),o(m,{name:"element Delete",color:"#fff",size:"18px",onClick:R=>C($)},null,8,["onClick"])])])],4))),128))],512),t.data.length<l.limit?(a(),r("div",{key:0,class:"rounded cursor-pointer overflow-hidden relative border border-dashed border-color",style:_(s(x))},[o(j,{limit:l.limit,onConfirm:k},{default:D(()=>[i("div",re,[o(m,{name:"element Plus",size:"20px",color:"var(--el-text-color-secondary)"}),i("div",ce,F(l.imageText||s(N)("upload.root")),1)])]),_:1},8,["limit"])],4)):O("",!0)],64))]),u.show?(a(),L(M,{key:0,"url-list":s(b),onClose:n[1]||(n[1]=p=>u.show=!1),"initial-index":u.index,"zoom-rate":1},null,8,["url-list","initial-index"])):O("",!0)],64)}}});const Re=X(de,[["__scopeId","data-v-b6ed1c7b"]]);export{Re as default};