pages-extUI-grid-grid.8lS_5xMk.js 9.2 KB

1
  1. import{_ as A,G as e,b as t,d as a,p as l,w as i,h as s,i as n,o as d,f as c,k as g,e as o,y as u,F as r,v as f,C as m,D as h,I as x,J as p,R as y,t as _,B as C}from"./index-2PZN6pGH.js";import{_ as b}from"./uni-card.CpdfOoXJ.js";import{_ as R,a as B}from"./uni-grid.DpCkTXPK.js";import{_ as k}from"./uni-section.BISPxi99.js";import{_ as G}from"./uni-badge.BFkMAjEp.js";const E=A({components:{},data:()=>({dynamicList:[],list:[{url:"/static/c1.png",text:"Grid 1",badge:"0",type:"primary"},{url:"/static/c2.png",text:"Grid 2",badge:"1",type:"success"},{url:"/static/c3.png",text:"Grid 3",badge:"99",type:"warning"},{url:"/static/c4.png",text:"Grid 4",badge:"2",type:"error"},{url:"/static/c5.png",text:"Grid 5"},{url:"/static/c6.png",text:"Grid 6"},{url:"/static/c7.png",text:"Grid 7"},{url:"/static/c8.png",text:"Grid 8"},{url:"/static/c9.png",text:"Grid 9"}]}),methods:{change(A){let{index:t}=A.detail;this.list[t].badge&&this.list[t].badge++,e({title:`点击第${t+1}个宫格`,icon:"none"})},add(){this.dynamicList.length<9?this.dynamicList.push({url:`/static/c${this.dynamicList.length+1}.png`,text:`Grid ${this.dynamicList.length+1}`,color:this.dynamicList.length%2==0?"#f5f5f5":"#fff"}):e({title:"最多添加9个",icon:"none"})},del(){this.dynamicList.splice(this.dynamicList.length-1,1)}}},[["render",function(A,e,E,F,V,I){const M=m,O=t(a("uni-card"),b),w=t(a("uni-icons"),s),D=n,Y=t(a("uni-grid-item"),R),H=t(a("uni-grid"),B),S=t(a("uni-section"),k),L=h,Q=x,X=p,Z=y,J=t(a("uni-badge"),G);return d(),l(D,{class:"container"},{default:i((()=>[c(O,{"is-full":"","is-shadow":!1},{default:i((()=>[c(M,{class:"uni-h6"},{default:i((()=>[g("宫格组件主要使用场景如:商品推荐列表、热门内容等")])),_:1})])),_:1}),c(S,{title:"基础样式",type:"line",padding:""},{default:i((()=>[c(H,{column:4,highlight:!0,onChange:I.change},{default:i((()=>[(d(),o(r,null,u(4,((A,e)=>c(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box",style:{"background-color":"#fff"}},{default:i((()=>[c(w,{type:"image",size:30,color:"#777"}),c(M,{class:"text"},{default:i((()=>[g("文本信息")])),_:1})])),_:1})])),_:2},1032,["index"]))),64))])),_:1},8,["onChange"])])),_:1}),c(S,{title:"自定义列数",type:"line",padding:""},{default:i((()=>[c(H,{column:4,highlight:!0,onChange:I.change},{default:i((()=>[(d(),o(r,null,u(8,((A,e)=>c(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box",style:{"background-color":"#fff"}},{default:i((()=>[c(w,{type:"image",size:30,color:"#777"}),c(M,{class:"text"},{default:i((()=>[g("文本信息")])),_:1})])),_:1})])),_:2},1032,["index"]))),64))])),_:1},8,["onChange"])])),_:1}),c(S,{title:"滑动视图",type:"line",padding:""},{default:i((()=>[c(X,{class:"swiper","indicator-dots":!0},{default:i((()=>[c(Q,null,{default:i((()=>[c(H,{column:3,highlight:!0,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.list,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{src:A.url,class:"image",mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024)])),_:2},1024)])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1}),c(Q,null,{default:i((()=>[c(H,{column:3,highlight:!0,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.list,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{src:A.url,class:"image",mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024)])),_:2},1024)])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1}),c(Q,null,{default:i((()=>[c(H,{column:3,highlight:!0,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.list,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{src:A.url,class:"image",mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024)])),_:2},1024)])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1})])),_:1})])),_:1}),c(S,{title:"动态加载",type:"line",padding:""},{default:i((()=>[c(D,{class:"grid-dynamic-box"},{default:i((()=>[c(H,{column:3,highlight:!0,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.dynamicList,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box",style:C({backgroundColor:A.color})},{default:i((()=>[c(L,{src:A.url,class:"image",mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024)])),_:2},1032,["style"])])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1}),c(Z,{type:"primary",onClick:I.add},{default:i((()=>[g("点击添加一个宫格")])),_:1},8,["onClick"]),0!==V.dynamicList.length?(d(),l(Z,{key:0,type:"primary",style:{"margin-top":"15px"},onClick:I.del},{default:i((()=>[g("点击删除一个宫格")])),_:1},8,["onClick"])):f("",!0)])),_:1}),c(S,{title:"无边框带角标(3列)",type:"line",padding:""},{default:i((()=>[c(H,{column:3,"show-border":!1,square:!1,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.list,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{class:"image",src:A.url,mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024),A.badge?(d(),l(D,{key:0,class:"grid-dot"},{default:i((()=>[c(J,{text:A.badge,type:A.type},null,8,["text","type"])])),_:2},1024)):f("",!0)])),_:2},1024)])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1}),c(S,{title:"矩形宫格(3列)",type:"line",padding:""},{default:i((()=>[c(H,{column:3,square:!1,highlight:!1,onChange:I.change},{default:i((()=>[(d(!0),o(r,null,u(V.list,((A,e)=>(d(),l(Y,{index:e,key:e},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{src:A.url,class:"image",mode:"aspectFill"},null,8,["src"]),c(M,{class:"text"},{default:i((()=>[g(_(A.text),1)])),_:2},1024)])),_:2},1024)])),_:2},1032,["index"])))),128))])),_:1},8,["onChange"])])),_:1}),c(S,{title:"边框颜色(4列 无文字)",type:"line",padding:""},{default:i((()=>[c(H,{column:4,"border-color":"#03a9f4",onChange:I.change},{default:i((()=>[c(Y,{index:0},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{class:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAM1BMVEVMaXEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADlf1jlAAAAEHRSTlMAnyAfZA/vf99Av5BPsC/P8UqnggAAAP1JREFUeNrt120OgyAQRVGoICgfzv5XW9O0IYDxT2dIad7ZAHlqblABAAAA/De7fVgl5BFWeluFDomJiqAE5NeIYhF4TJ5qmnuDO6iTFR8btacLO98BoUxobDxvIZUFPa9YaLpjeIYQyQ8JA4bYlS4wF8XVT6c50ikWnordPIgEimLo4zBL96VpziFenyecZIZstCcXl/KCKkkJsGtbFAGmTaMETxUzYIifdsjWFUXA3hZFQJYfIlWUQqgovdAMmbYobkRRmiERRbkR+yHyRZk2jYkqYdqi6BFFoVoeV5T5L1sHLlt3Dly2vigKLltX5H/fCuMqWQEAAADAb3oC/8Y6asrRIuwAAAAASUVORK5CYII=",mode:"aspectFill"})])),_:1})])),_:1}),c(Y,{index:1},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{class:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEVMaXEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADisHBNAAAAEXRSTlMAXxAf3++fv4A/b48vz7APTxHT2E0AAAE+SURBVHja7djJkoMwDEVRHMuDbDO8///Zrs6uRRGaRGITnW0Wt4RBBZmcc84559z7Bodac/m11LrxpIzbMmOntKg2QCs4VFij0Amv9U8TjXDuw0YE7CP9hsgj3RCp+BetQajUyk+tk2ok4Cnl8PeR25JihABQH9MO60UCsGwHebXInOPhT2qR9fiOgIhYCDdEHmQfkcuGbrhYYINGE41gcB5ZNLJ+g0k0uv0YCOqJmkQisXaiJQglWk+B1HQTMSdIi+4YXLBDrJoIhB0KykdhnRgZe2WzPgrkYZ2gumom4oKdEsyfvByNNy2orcoLpEOYw6RszPqfa1JI+utD6gaLVsriMOINjdW+gVxfGArvbGfSe1MOCBZ/EMy4Iiq8fJ7JCl/sRoNUXFGmtxCuYIXb12iQXK7gyTnnnHPOfZUfx3FVD6Wckg4AAAAASUVORK5CYII=",mode:"aspectFill"})])),_:1})])),_:1}),c(Y,{index:2},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{class:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAANlBMVEVMaXEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADisHBNAAAAEXRSTlMAgH9vn1rvD8DPHy8/30CPsJFh28oAAAFnSURBVHja7djLbsQgDAVQ87aBhPj/f7ajSiM1cjsZDSbqwmeZzdUlAaOAMcYYY4z5x+qenHP4bTiXdtC1h0gskWugowXkv1FSKcEXsMA05CtUYVLlawSTIr9hQRFJr0hGRFoRUjI/bDH0+nySRlYO8cxHqHBWSTWkYKggdRGywh0hlc8iLBD4JBfQVzY+CbDAuGGxEp9QAXXlWJ5RXOaTqJ3R0sFnOcC86p4iIguihvowybHq7myJgmihW4RiKqCl5N877KDIv1isuq6I/gZJ/FJuoGDjVSlS6737QSwRaCtBNkugroht42EBuiMk3BHil78TeZZlWKDmG1bruOG6FVjnulX394cLfv75/DVTd+IzKjOH+yHHXkkoT8fZfYA/fmm03SELW4NPZX4TFe0pJQ3tKSVRB1hcZEswg9ZHwM5XcuwwqY7tZQeta2MLx8ZSxpEaqOo9eO8HIg7/0HsBY4wxxhjzoS/37FSOkw2ECwAAAABJRU5ErkJggg==",mode:"aspectFill"})])),_:1})])),_:1}),c(Y,{index:3},{default:i((()=>[c(D,{class:"grid-item-box"},{default:i((()=>[c(L,{class:"image",src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEVMaXEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABjXQ0ZAAAAEnRSTlMAH5/A4BBff/C/kDA/zw9Qr3C/LrqgAAABQElEQVR42u3WyW7DMAxFUUrR5Kmx3/9/bLMwQkJwCygggxTlWXoR+Zo2EXLOOeecc39G2G9PZGRpYGTj3mB+SAHMD4kwPyRv6BiOnBmOg9mNg02kKmy4sJp9HSyRphmXivKjsg45GqxD8o6nBKl9kZJVZMQKqVpMvFCyCFnExNtCBdJMKirYlokSpKCYwbd9hxRJwQHW7vRwgxSUM6ZMDyukXW8a/Kr2IatqRjp/Lqju+DxDmPN5OWqGrKmb+FVIUttUwJ5/WPZFY+Fyxik3rZBl6jJYhXQoDJwzOERnNZYGIWaSisqODxO6b0NS2vER4xKNyXhBGd5Vo8afWm4YVz8whBLGRRpT8ILwgSGh/iZCSvUUSFO/4y30O95E//fXRL/jLZR3hCRI7wiJZGKDFMjC+o6QOkkLOeecc865/+cbQHFbe48m5IQAAAAASUVORK5CYII=",mode:"aspectFill"})])),_:1})])),_:1})])),_:1},8,["onChange"])])),_:1})])),_:1})}],["__scopeId","data-v-cc59bcac"]]);export{E as default};