@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
8 lines (7 loc) • 2.27 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),S=require("../../hooks/useResize.js"),v=require("../../utils/common.js"),_=require("../../utils/decoration.js"),P=require("../../utils/styled.js");require("lodash-es");require("../../utils/logger.js");function q({width:l,height:c,rowPoints:a,rowCount:s}){const d=l/(a+1),h=c/(s+1);return new Array(s).fill(0).map((u,o)=>new Array(a).fill(0).map((n,m)=>[d*(m+1),h*(o+1)])).reduce((u,o)=>[...u,...o],[])}const j=["#fff","#0de7c2"],f=200,g=50,p=20,x=4,e=2.5,y=e/2,N=q({width:f,height:g,rowPoints:p,rowCount:x}),i=N[p*2-1],r=N[p*2-3],z=P.styled.div`
width: 100%;
height: 100%;
}
.__STYLED__ svg {
transform-origin: left top;
`("decoration-1"),R=v.withInstall(t.defineComponent({name:"Decoration1",props:_.createColorProps(),setup(l,{expose:c}){const{autoBindRef:a,refreshLayoutSize:s,domSize:d}=S.useResize();return c({refreshLayoutSize:s}),()=>{const{color:h}=l,{width:u,height:o}=d,n=v.mergeColor(j,h),m={transform:`scale(${u/f},${o/g})`};return t.createVNode(z,{ref:a},{default:()=>[t.createVNode("svg",{width:f,height:g,style:m},[N.map(([C,w],V)=>{const $=C-y,b=w-y;return Math.random()>.6?t.createVNode("rect",{key:V,x:$,y:b,width:e,height:e,fill:n[0]},[Math.random()>.6&&t.createVNode("animate",{attributeName:"fill",values:`${n[0]};transparent`,dur:"1s",begin:Math.random()*2,repeatCount:"indefinite"},null)]):null}),t.createVNode("rect",{fill:n[1],x:i[0]-e,y:i[1]-e,width:e*2,height:e*2},[t.createVNode("animate",{attributeName:"width",values:`0;${e*2}`,dur:"2s",repeatCount:"indefinite"},null),t.createVNode("animate",{attributeName:"height",values:`0;${e*2}`,dur:"2s",repeatCount:"indefinite"},null),t.createVNode("animate",{attributeName:"x",values:`${i[0]};${i[0]-e}`,dur:"2s",repeatCount:"indefinite"},null),t.createVNode("animate",{attributeName:"y",values:`${i[1]};${i[1]-e}`,dur:"2s",repeatCount:"indefinite"},null)]),t.createVNode("rect",{fill:n[1],x:r[0]-e,y:r[1]-e,width:e*2,height:e*2},[t.createVNode("animate",{attributeName:"width",values:"0;40;0",dur:"2s",repeatCount:"indefinite"},null),t.createVNode("animate",{attributeName:"x",values:`${r[0]};${r[0]-40};${r[0]}`,dur:"2s",repeatCount:"indefinite"},null)])])]})}}}));exports.Decoration1=R;