cione-comp-lib/lib/packages/co-flopper/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("./index3.js");var t=require("../../_virtual/plugin-vue_export-helper.js");const o=e.defineComponent({name:"CoFlopper",components:{},props:{data:{type:Object,default:{value:"93578"}},time:{type:Number,default:10},titleContainerProps:{type:Object,default:{width:50,height:100,margin:10,paddingTop:0,background:""}},titleProps:{type:Object,default:{fontSize:30,fontWeight:"normal",color:"rgba(255, 255, 255, 1)",fontFamily:"微软"}},prefixProps:{type:Object,default:{value:"",fontSize:26,fontWeight:"normal",color:"rgba(255, 255, 255, 1)",fontFamily:"微软",margin:2,top:2}},suffixProps:{type:Object,default:{value:"",fontSize:26,fontWeight:"normal",color:"rgba(255, 255, 255, 1)",fontFamily:"微软",margin:2,top:2}},sepaProps:{type:Object,default:{value:" - ",fontSize:26,fontWeight:"normal",color:"rgba(255, 255, 255, 1)",fontFamily:"微软",bottom:0,right:-10}}},setup(t){let o=0;const l=e.ref(!1),r=e.computed((()=>({"--value":`${t.prefixProps.value}`,"--fontSize":`${t.prefixProps.fontSize}px`,"--fontWeight":t.prefixProps.fontWeight,"--color":t.prefixProps.color,"--fontFamily":t.prefixProps.fontFamily,"--margin":`${t.prefixProps.margin}px`,"--top":`${t.prefixProps.top}px`}))),n=e.computed((()=>({"--value":`${t.suffixProps.value}`,"--fontSize":`${t.suffixProps.fontSize}px`,"--fontWeight":t.suffixProps.fontWeight,"--color":t.suffixProps.color,"--fontFamily":t.suffixProps.fontFamily,"--margin":`${t.suffixProps.margin}px`,"--top":`${t.suffixProps.top}px`}))),i=e.computed((()=>({"--value":t.sepaProps.value,"--fontSize":`${t.sepaProps.fontSize}px`,"--fontWeight":t.sepaProps.fontWeight,"--color":t.sepaProps.color,"--fontFamily":t.sepaProps.fontFamily,"--bottom":`${t.sepaProps.bottom}%`,"--right":`${t.sepaProps.right}px`}))),a=e.computed((()=>({"--width":`${t.titleContainerProps.width}px`,"--height":`${t.titleContainerProps.height}px`,"--margin":`${t.titleContainerProps.margin}px`,"--paddingTop":`${t.titleContainerProps.paddingTop}px`,"--background":`url(${t.titleContainerProps.background})`,"--transformZ":1.5*t.titleContainerProps.height+"px"}))),p=e.computed((()=>({"--fontSize":`${t.titleProps.fontSize}px`,"--fontWeight":t.titleProps.fontWeight,"--color":t.titleProps.color,"--fontFamily":t.titleProps.fontFamily})));function s(){o=setInterval((()=>{l.value=!1,setTimeout((()=>{l.value=!0}),2e3)}),1e3*t.time)}function f(){clearInterval(o)}return e.watch((()=>t.time),(()=>{f(),s()})),e.onMounted((()=>{s()})),e.onUnmounted((()=>{f()})),{...e.toRefs(t),isAnimate:l,titleStyle:p,titleContainerStyle:a,prefixStyle:r,suffixStyle:n,sepaStyle:i}}}),l={class:"co-flopper-container"};var r=t.default(o,[["render",function(t,o,r,n,i,a){return e.openBlock(),e.createElementBlock("div",l,[e.createElementVNode("div",{class:"prefix-container",style:e.normalizeStyle({...t.prefixStyle})},[e.createElementVNode("p",null,e.toDisplayString(t.prefixStyle["--value"]),1)],4),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data.value,((o,l)=>(e.openBlock(),e.createElementBlock("div",{class:"co-flopper-main-container",style:e.normalizeStyle({...t.titleContainerStyle})},[e.createElementVNode("div",{class:"co-flopper-wrap",style:e.normalizeStyle({...t.titleContainerStyle,...t.titleStyle})},[e.createElementVNode("div",{class:e.normalizeClass(["co-flopper-item-container",[t.isAnimate?`co-flopper-item-container-${o}`:null]])},[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(10,(o=>e.createElementVNode("div",{class:"co-flopper-content-container",style:e.normalizeStyle({...t.titleContainerStyle,transform:`rotateX(${36*(o-1)}deg) translateZ(var(--transformZ))`})},[e.createElementVNode("span",{class:"co-flopper-text",style:e.normalizeStyle({...t.titleStyle})},e.toDisplayString(o-1),5)],4))),64))],2)],4),(t.data.value.length-l)%3==1&&t.data.value.length-l!=1?(e.openBlock(),e.createElementBlock("div",{key:0,class:"co-flopper-sign",style:e.normalizeStyle({...t.sepaStyle})},[e.createElementVNode("span",null,e.toDisplayString(t.sepaStyle["--value"]),1)],4)):e.createCommentVNode("",!0)],4)))),256)),e.createElementVNode("div",{class:"prefix-container",style:e.normalizeStyle({...t.prefixStyle})},[e.createElementVNode("p",null,e.toDisplayString(t.suffixStyle["--value"]),1)],4)])}]]);exports.default=r;