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