cione-comp-lib/lib/packages/co-carousel-stereoscopic/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");require("./index.vue_vue_type_style_index_0_scoped_true_lang.js");var t=require("../../_virtual/plugin-vue_export-helper.js");const l=e.defineComponent({name:"CoCarouselStereoscopic",props:{list:{type:Array,default:()=>{}},width:{type:Number},height:{type:Number},fontSize:{type:Number},showBackColor:{type:Boolean},color:{type:String},backgroundColor:{type:String},letterSpacing:{type:Number},lineHeight:{type:Number},fontFamily:{type:String},imgWidth:{type:Number,default:300},imgHeight:{type:Number,default:200}},setup(t){const l=e.ref(),o=e.ref(),r=e.ref(0),a=e.toRef(t,"list"),n=e.computed((()=>360/t.list.length)),i=e.computed((()=>t.imgWidth*a.value.length/6.28)),s=()=>{l.value&&(l.value.style.transform=`rotateY(${n.value/500*++r.value}deg)`,l.value.style.transition=1.6/a.value.length+"s linear")},u=()=>{s(),o.value=setInterval((()=>{s()}),1.6/a.value.length*100)};return e.onMounted((()=>{u()})),{deg:n,radius:i,box:l,list:a,handleMouseover:()=>{clearInterval(o.value)},handleMouseleave:()=>{u()},handleClick:e=>{window.open(e.link)}}}}),o={class:"co-carousel-stereoscopic"},r=["onClick"],a=["src"];var n=t.default(l,[["render",function(t,l,n,i,s,u){return e.openBlock(),e.createElementBlock("div",o,[e.createElementVNode("section",{ref:"box",style:e.normalizeStyle({width:t.imgWidth+"px",height:t.imgHeight+"px"}),onMouseover:l[0]||(l[0]=(...e)=>t.handleMouseover&&t.handleMouseover(...e)),onMouseleave:l[1]||(l[1]=(...e)=>t.handleMouseleave&&t.handleMouseleave(...e))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,((l,o)=>(e.openBlock(),e.createElementBlock("div",{class:"carousel-stereoscopic__item",style:e.normalizeStyle({transform:`rotateY(${t.deg*o}deg) translateZ(${t.radius}px)`}),onClick:e=>t.handleClick(l)},[e.createElementVNode("img",{src:l.imgSrc,alt:""},null,8,a),e.createElementVNode("span",{class:"carousel-stereoscopic__span",style:e.normalizeStyle({fontSize:t.fontSize+"px",letterSpacing:t.letterSpacing+"px",lineHeight:t.lineHeight+"px",backgroundColor:t.backgroundColor,color:t.color})},e.toDisplayString(l.title),5)],12,r)))),256))],36)])}],["__scopeId","data-v-5707b24a"]]);exports.default=n;