vue-pure-admin/static/js/horizontal-CgvlW9nS.js

2 lines
1.4 KiB
JavaScript

import{s as v,a as x}from"./vue-virtual-scroller.esm-C0neR8dl.js";import{d as w,a as d,p as y,e as m,f as g,k as z,g as i,h as I,i as o,w as p,u,s as V,t as C,_ as k}from"./index-DVTACvpB.js";const b={class:"dynamic-scroller-demo"},B={class:"flex-ac mb-4 shadow-2xl"},N={class:"text-center"},S=w({__name:"horizontal",setup($){const l=d([]),a=d("");for(let e=0;e<800;e++)l.value.push({id:e});const _=y(()=>{if(!a.value)return l.value;const e=a.value;return l.value.filter(t=>t.id==e)});return(e,t)=>{const f=m("el-input"),h=m("IconifyIconOnline");return g(),z("div",b,[i("div",B,[t[1]||(t[1]=I(" 水平模式 horizontal ")),o(f,{modelValue:a.value,"onUpdate:modelValue":t[0]||(t[0]=s=>a.value=s),class:"mr-2 !w-[1/1.5]",clearable:"",placeholder:"Filter...",style:{width:"300px"}},null,8,["modelValue"])]),o(u(x),{items:_.value,"min-item-size":54,direction:"horizontal",class:"scroller"},{default:p(({item:s,index:n,active:c})=>{var r;return[o(u(v),{item:s,active:c,"size-dependencies":[s.id],"data-index":n,"data-active":c,title:`Click to change message ${n}`,style:V({width:`${Math.max(130,Math.round(((r=s.id)==null?void 0:r.length)/20*20))}px`}),class:"message"},{default:p(()=>[i("div",null,[o(h,{icon:"openmoji:beaming-face-with-smiling-eyes",width:"40"}),i("p",N,C(s.id),1)])]),_:2},1032,["item","active","size-dependencies","data-index","data-active","title","style"])]}),_:1},8,["items"])])}}}),j=k(S,[["__scopeId","data-v-d46e8f01"]]);export{j as default};