@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
43 lines (42 loc) • 2.24 kB
JavaScript
;var k=Object.defineProperty;var g=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var p=(o,e,t)=>e in o?k(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,s=(o,e)=>{for(var t in e||(e={}))q.call(e,t)&&p(o,t,e[t]);if(g)for(var t of g(e))x.call(e,t)&&p(o,t,e[t]);return o};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),C=require("classnames"),S=require("../../hooks/useResize.js"),f=require("../../utils/common.js"),n=require("../../utils/decoration.js"),m=require("../../utils/styled.js");require("lodash-es");require("../../utils/logger.js");function b(){return s(s(s({},n.createColorProps()),n.createReverseProps()),n.createDurationProps(3))}const j=["rgba(255, 255, 255, 0.3)","rgba(255, 255, 255, 0.3)"],P=m.styled.div`
position: relative;
width: 100%;
height: 100%;
`("decoration-4"),z=m.styled.div`
display: flex;
overflow: hidden;
position: absolute;
flex: 1;
}
.__STYLED__.normal {
animation: ani-height ease-in-out infinite;
left: 50%;
margin-left: -2px;
}
.__STYLED__.reverse {
animation: ani-width ease-in-out infinite;
top: 50%;
margin-top: -2px;
}
@keyframes ani-height {
0% {
height: 0%;
}
70% {
height: 100%;
}
100% {
height: 100%;
}
}
@keyframes ani-width {
0% {
width: 0%;
}
70% {
width: 100%;
}
100% {
width: 100%;
}
`("decoration-content"),N=f.withInstall(i.defineComponent({name:"Decoration4",props:b(),setup(o,{expose:e}){const{autoBindRef:t,refreshLayoutSize:y,domSize:v}=S.useResize();return e({refreshLayoutSize:y}),()=>{const{width:a,height:l}=v,{color:w,reverse:r,duration:_}=o,c=f.mergeColor(j,w),d=r?a:5,u=r?5:l,D={width:`${d}px`,height:`${u}px`,animationDuration:`${_}s`},h=r?`0, 2.5 ${a}, 2.5`:`2.5, 0 2.5, ${l}`;return i.createVNode(P,{ref:t},{default:()=>[i.createVNode(z,{class:C(r?"reverse":"normal"),style:D},{default:()=>[i.createVNode("svg",{width:d,height:u},[i.createVNode("polyline",{stroke:c[0],points:h},null),i.createVNode("polyline",{class:"bold-line",stroke:c[1],"stroke-width":"3","stroke-dasharray":"20, 80","stroke-dashoffset":"-30",points:h},null)])]})]})}}}));exports.Decoration4=N;