cione-comp-lib/lib/packages/co-mix-rotate/level-view.js

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("vue"),t=require("../../_virtual/plugin-vue_export-helper.js");const o=e.defineComponent({props:{perspectivePercenter:{type:Number,default:0},level:{type:Number,default:0},transformY:{type:Number,default:-70},specialSpeed:{type:Number,default:10},specialDeg:{type:Number,default:0},showImage:{type:Boolean,default:!1},deg:{type:Number,default:0},distance:{type:Number,default:100},isStop:{type:Boolean,default:!1},diff:{type:Number,default:0},list:{type:Array,default:[{id:1,text:"",imgSrc:"",videoSrc:""}]},textData:{type:Object,default:{speed:50,list:[{id:1,text:"",imgSrc:"",videoSrc:""}]}},imageProps:{type:Object,default:{width:100,height:100,url:""}},containerProps:{type:Object,default:{width:80,height:80}},titleProps:{type:Object,default:{top:0,fontSize:16,fontFamily:"微软雅黑",fontWeight:"normal",color:"white"}},textProps:{type:Object,default:{top:0,fontSize:16,fontFamily:"微软雅黑",fontWeight:"normal",color:"white"}},lineProps:{type:Object,default:{show:!0,lineWidth:1,lineColor:"rgba(78, 229, 247, 0.4)"}},pointProps:{type:Object,default:{show:!1,size:20,color:"rgba(78, 229, 247, 0.4)"}}},emits:["img-click","item-click"],setup(t,{emit:o}){const l=t.specialDeg>-1?t.specialDeg:(r=361,(i=1)+Math.floor((r-i)*Math.random()));var i,r;const n=t.specialDeg>-1?l:Number((360/t.list.length).toFixed(2))+l,a=Number((360/t.textData.list.length).toFixed(2)),s=e.ref(2*t.distance),c=e.ref(0),p=e.ref(0);let m={rotateDeg:0,textRotateDeg:0},d=0;const u=e.computed((()=>{const e=t.deg;return{width:`${t.imageProps.width}px`,height:`${t.imageProps.height}px`,backgroundImage:`url(${t.imageProps.url})`,transform:`translate3d(-50%, -50%, 0) rotateX(-90deg) rotateY(${-e}deg)`}})),g=e.computed((()=>({"--width":`${t.containerProps.width}px`,"--height":`${t.containerProps.height}px`}))),f=e.computed((()=>({"--width":`${s.value}px`,"--height":`${s.value}px`,"--line":`${t.lineProps.show?t.lineProps.lineWidth:0}px solid ${t.lineProps.lineColor}`,transform:"translate3d(-50%, -50%, 0px) rotateX(90deg)"}))),x=e.computed((()=>{const e=t.pointProps.size,o=t.pointProps.color,l=t.pointProps.show;let i=Number((e/2).toFixed(0));return i%2&&(i-=1),{"--size":`${l?e:0}px`,"--color":o,transform:`translateX(-${i}px) translateY(-${i}px)`}})),y=e.computed((()=>({"--top":`${t.titleProps.top}%`,"--fontSize":`${t.titleProps.fontSize}px`,"--fontFamily":`${t.titleProps.fontFamily}`,"--fontWeight":`${t.titleProps.fontWeight}`,"--color":`${t.titleProps.color}`}))),h=e.computed((()=>({"--top":`${t.textProps.top}%`,"--fontSize":`${t.textProps.fontSize}px`,"--fontFamily":`${t.textProps.fontFamily}`,"--fontWeight":`${t.textProps.fontWeight}`,"--color":`${t.textProps.color}`})));function S(){let e=c.value,o=p.value;e-=t.specialSpeed/100,e<-360&&(e+=360),e>360&&(e-=360),o-=t.textData.speed/100,o<-360&&(o+=360),o>360&&(o-=-360),c.value=e,p.value=o,d=requestAnimationFrame(S)}function v(){d=requestAnimationFrame(S)}function z(){cancelAnimationFrame(d)}return e.watch((()=>t.isStop),(function(){t.isStop?(z(),m={rotateDeg:c.value,textRotateDeg:p.value}):(v(),m={rotateDeg:0,textRotateDeg:0})})),e.watch((()=>t.diff),(function(){if(!t.isStop)return;const e=t.diff/4;c.value=m.rotateDeg+e,p.value=m.textRotateDeg+e})),e.watch((()=>t.distance),(()=>{s.value=2*t.distance})),e.onMounted((()=>{v()})),e.onUnmounted((()=>{z()})),{eDeg:n,textDeg:a,size:s,rotateDeg:c,textRotateDeg:p,imgClick:function(){const e={type:"img",imgSrc:t.imageProps.url};o("img-click",e)},itemClick:function(e,l){const i={type:"item",item:e,index:l,level:t.level};o("item-click",i)},imageStyle:u,lineStyle:f,pointStyle:x,containerStyle:g,titleStyle:y,textStyle:h,...e.toRefs(t)}}}),l=["onClick"];var i=t.default(o,[["render",function(t,o,i,r,n,a){return e.openBlock(),e.createElementBlock("div",{class:"co-mix-zepto-line",style:e.normalizeStyle({...t.lineStyle})},[e.withDirectives(e.createElementVNode("div",{class:"co-mix-zepto-center-img",style:e.normalizeStyle({...t.imageStyle}),onClick:o[0]||(o[0]=(...e)=>t.imgClick&&t.imgClick(...e))},null,4),[[e.vShow,t.showImage]]),e.createElementVNode("div",{class:"co-mix-zepto-line co-mix-zepto-event-none",style:e.normalizeStyle({...t.lineStyle,transform:`translate3d(-50%, -50%, 0px) rotateZ(${t.textData.list.length?-t.textRotateDeg:0}deg)`,"--line":"0px solid white"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.textData.list,((o,l)=>(e.openBlock(),e.createElementBlock("div",{class:"co-mix-zepto-son-container",style:e.normalizeStyle({transform:`rotateX(-90deg) rotateY(${t.textDeg*(l+1)}deg) translate3d(-50px, -50px, ${t.distance}px)`})},[e.createElementVNode("div",{class:"co-mix-zepto-son",style:e.normalizeStyle({transform:`rotateY(${t.textDeg*-(l+1)-t.textRotateDeg}deg)`})},[e.createElementVNode("div",{class:"co-mix-zepto-bg",style:e.normalizeStyle({width:"100px",height:"100px",...t.titleStyle,"--background":`url(${o.imgSrc})`})},[e.createElementVNode("span",null,e.toDisplayString(o.text),1),e.createElementVNode("span",{class:"co-mix-zepto-point",style:e.normalizeStyle(t.pointStyle)},null,4)],4)],4)],4)))),256))],4),e.createElementVNode("div",{class:"co-mix-zepto-line",style:e.normalizeStyle({...t.lineStyle,transform:`translate3d(-50%, -50%, 0px) rotateZ(${t.list.length?-t.rotateDeg:0}deg)`,"--line":"0px solid white"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,((o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"co-mix-zepto-son-container co-mix-zepto-pointer",onClick:e=>t.itemClick(o,i),style:e.normalizeStyle({transform:`rotateX(-90deg) rotateY(${t.eDeg*(i+1)}deg) translate3d(-50%, ${t.transformY}%, ${t.distance-t.distance*(t.perspectivePercenter/100)}px)`})},[e.createElementVNode("div",{class:"co-mix-zepto-son",style:e.normalizeStyle({transform:`rotateY(${t.eDeg*-(i+1)-t.rotateDeg}deg)`})},[e.createElementVNode("div",{class:"co-mix-zepto-bg",style:e.normalizeStyle({...t.containerStyle,...t.textStyle,"--background":`url(${o.imgSrc})`})},[e.createElementVNode("span",null,e.toDisplayString(o.text),1)],4)],4)],12,l)))),256))],4)],4)}]]);exports.default=i;