cione-comp-lib/lib/packages/co-rotate3d2-std/index2.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("./prop.js");require("./index3.js");var o=require("../tools.js"),n=require("../../_virtual/plugin-vue_export-helper.js");const a=e.defineComponent({name:"CoRotate3d2Std",props:t.default,emits:["index"],setup(t){const n=e.ref(!1),a=e.ref(""),l=e.ref({x:0,y:0,distance:0}),r=e.ref(),i=e.ref(),u=e.ref(0),s=e.ref(0),d=e.toRef(t,"list"),m=e.ref(d.value.length),c=e.ref(d.value[0]);e.watch((()=>t.rotationSpeed),(()=>{B(),k()}));const p=e.computed((()=>({"--width":`${t.width}px`,"--height":`${t.height}px`,"--left":t.width/2+"px"}))),v=e.computed((()=>({"--fontSize":`${t.fontSize}px`,"--fontColor":`${t.fontColor}`,"--fontWeight":`${t.fontWeight}`,"--fontFamily":`${t.fontFamily}`,"--fontWidth":`${t.fontWidth}px`,"--fontHeight":`${t.fontHeight}px`,"--fontTextAlign":`${t.fontTextAlign}`,"--indexColor":`${t.indexColor}`,"--fontPadding":`${t.fontPadding}px`,"--indexBgColor":`url(${t.indexBgColor})`,"--fontTop":`${t.fontTop}%`,"--fontBgImg":`url(${t.fontBgImg})`}))),g=e.computed((()=>({"--angle":10*t.angle+"%","--wrapRotateZ":`${t.wrapRotateZ}deg`}))),y=e.computed((()=>({"--yuanBgImg":`url(${t.yuanBgImg})`,"--yuanWidth":`${t.yuanWidth}px`,"--yuanHeight":`${t.yuanHeight}px`,"--yuanTop":`${t.yuanTop}px`,"--yuanLeft":t.yuanWidth/2+"px","--yuanColor":`${t.yuanColor}`,"--yuanBorder":`${t.yuanBorder}px`}))),f=e.computed((()=>({"--borColor":`${t.borColor}`,"--borWidth":`${t.borWidth}px`,"--borTop":`${t.borTop}px`,"--indexColor":`${t.indexColor}`}))),x=e.computed((()=>({"--imageWidth":`${t.imageWidth}px`,"--imageHeight":`${t.imageHeight}px`,"--imageTop":`${t.imageTop}px`,"--imageLeft":t.imageWidth/2+"px"}))),h=e.computed((()=>({"--fontSize":`${t.textStyle.size}px`,"--color":`${t.textStyle.color}`,"--fontFamily":`${t.textStyle.fontFamily}`,"--weight":`${t.textStyle.fontWeight}`,"--align":`${t.textStyle.align}`,"--padding":`${t.textStyle.padding}px`}))),S=e.computed((()=>t.width*m.value/t.diameter)),$=(e,t)=>{c.value=e,s.value=t};function C(e){return()=>{const t=u.value;if(e>t&&(u.value+=2),e<t&&(u.value-=2),e+10>t&&e-10<t)return k();b(),requestAnimationFrame(C(e))}}function z(e){const t=360;let o=l.value.distance-1*e;o>t&&(o-=t),o<-360&&(o+=t),u.value=o,requestAnimationFrame(b)}function F(){u.value-=t.rotationSpeed/100,b(),r.value=requestAnimationFrame(F)}const b=()=>{const e=i.value;if(!e)return;const o=360,n=o/m.value;let a=u.value,l=0;a>o&&(a-=o),a<-360&&(a+=o),a<0&&(l=parseInt((a-30)/n,10)),a>0&&(l=parseInt((a+30)/n,10)),l<=0?(l=Math.abs(l),l>=m.value&&(l=0)):l=m.value-l,$(d.value[l],l),u.value=a,e.style.transform=`translateY(${t.transformY||0}px) rotateY(${a}deg)`};const k=()=>{r.value=requestAnimationFrame(F)};function B(){cancelAnimationFrame(r.value)}function T(){n.value=!1,l.value={x:0,y:0,distance:0},a.value=""}return e.onMounted((()=>{k()})),e.onUnmounted((()=>{B()})),{...e.toRefs(t),Style:p,radius:S,unitSum:m,rotateDeg:u,zoetrope:i,borStyle:f,fontStyle:v,yuanStyle:y,zoetropeStyle:g,clickItem:(e,t)=>{if(!i.value)return;const o=360/m.value*-t+40;B(),requestAnimationFrame(C(o))},check:$,handleClick:()=>{o.handlePushEvent({key:"CoRotate3d2Std",elementId:t.dataKey,event:"click",data:{item:c.value,index:s.value}})},mouseleave:()=>{k(),T()},mouseOver:e=>{if(!n.value)return;const{pageX:t,pageY:o}=e,{x:r,y:i}=l.value,u=Number((r-t).toFixed(1)),s=Number((i-o).toFixed(1)),d=Math.abs(u),m=Math.abs(s);if(a.value)return"h"===a.value?z(u):void 0;d>20&&(a.value="h"),m>20&&(a.value="v")},mouseenter:e=>{const{pageX:t,pageY:o}=e;B(),n.value=!0,l.value={x:t,y:o,distance:u.value}},moveHorizonal:z,startFunc:function(e){B();const[t]=e.touches;l.value={x:t.pageX,y:t.pageY,distance:u.value}},moveFunc:function(e){const[t]=e.touches,{x:o}=l.value;z(Number((o-t.pageX).toFixed(1)))},endFunc:function(){k(),T()},list:d,imageItem:c,indexbtn:s,imageStyle:x,textStyle:h}}}),l={style:{width:"100%",height:"100%"}},r=["src"],i={class:e.normalizeClass(["zoetrope"]),ref:"zoetrope"},u=["onClick"];var s=n.default(a,[["render",function(t,o,n,a,s,d){return e.openBlock(),e.createElementBlock("div",{class:"co-rotate3d-std",style:e.normalizeStyle(t.Style),onTouchstart:o[1]||(o[1]=(...e)=>t.startFunc&&t.startFunc(...e)),onTouchmove:o[2]||(o[2]=(...e)=>t.moveFunc&&t.moveFunc(...e)),onTouchend:o[3]||(o[3]=(...e)=>t.endFunc&&t.endFunc(...e)),onMousedown:o[4]||(o[4]=(...e)=>t.mouseenter&&t.mouseenter(...e)),onMousemove:o[5]||(o[5]=e.withModifiers(((...e)=>t.mouseOver&&t.mouseOver(...e)),["prevent"])),onMouseup:o[6]||(o[6]=(...e)=>t.mouseleave&&t.mouseleave(...e))},[e.createElementVNode("div",{class:"maxImage",style:e.normalizeStyle(t.imageStyle),onClick:o[0]||(o[0]=e=>t.handleClick())},[e.createElementVNode("div",l,[e.createElementVNode("img",{src:t.imageItem.imgSrc},null,8,r),e.createElementVNode("p",{class:"co-rotate3d-text",style:e.normalizeStyle({...t.textStyle})},e.toDisplayString(t.imageItem.text),5)])],4),e.createElementVNode("div",{class:"zoetrope-wrapper",style:e.normalizeStyle(t.zoetropeStyle)},[e.createElementVNode("div",{class:"yuan",style:e.normalizeStyle(t.yuanStyle)},null,4),e.createElementVNode("div",i,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,((o,n)=>(e.openBlock(),e.createElementBlock("div",{class:"zoetrope-son",style:e.normalizeStyle({transform:`rotateY(${360/t.unitSum*n}deg) translateZ(${t.radius}px)`,...t.Style}),key:n,onClick:e=>t.clickItem(o,n)},[e.createElementVNode("div",{class:e.normalizeClass(["bor",{indexBorColor:t.indexbtn==n}]),style:e.normalizeStyle({transform:`rotateY(${360/t.unitSum*-n-t.rotateDeg}deg) translate(-50%, 0, 0)`,...t.borStyle})},null,6),e.createElementVNode("p",{class:e.normalizeClass(["item-title",{indexBtnColor:t.indexbtn==n}]),style:e.normalizeStyle({transform:`rotateY(${360/t.unitSum*-n-t.rotateDeg}deg) translate3d(-50%, 0, 0)`,...t.fontStyle})},e.toDisplayString(o.title),7)],12,u)))),128))],512)],4)],36)}]]);exports.default=s;