cione-comp-lib/lib/packages/co-time-line/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("./time_item.js");require("./index3.js");var o=require("../../_virtual/plugin-vue_export-helper.js");const r="助农爱心小站推出XX农产品进行销售。助农爱心小站推出XX农产品进行销售。助农爱心小站推出XX农产品进行销售。",l=[{time:"2022.03.16",title:"助农爱心小站建立",type:"text",text:r,value:""},{time:"2022.03.16",title:"助农爱心小站建立",type:"text",text:r,value:""},{time:"2022.03.16",title:"助农爱心小站建立",type:"text",text:r,value:""},{time:"2022.03.16",title:"助农爱心小站建立",type:"text",text:r,value:""},{time:"2022.03.16",title:"助农爱心小站建立",type:"video",text:"",value:"https://images.cionetech.com/video/IMG_1172.mp4"},{time:"2022.03.16",title:"助农爱心小站建立",type:"text",text:r,value:""}],n=e.defineComponent({name:"CoTimeLine",components:{TimeLineItem:t.default},props:{list:{type:Array,default:l},type:{type:String,default:"center"},speed:{type:Number,default:8},containerProps:t.Props.containerProps,timeProps:t.Props.timeProps,circleProps:t.Props.circleProps,mediaProps:t.Props.mediaProps},setup(t){const o=e.reactive({firstUiTop:0,seconedUiTop:0,mainOverflow:"hidden"}),r=e.toRef(t,"list"),l=e.ref(),n=e.ref(),i=e.ref(),a=e.ref(0),s=e.ref(0),c=e.ref(0),p=e.ref(),u=e.ref(0);let m=0,d=0;const f=e.computed((()=>({"--height":`${c.value}px`}))),v=e.computed((()=>({transform:`translateX(${t.containerProps.translateX||0}%) translateY(${u.value}%)`})));function y(e){cancelAnimationFrame(p.value),p.value=null,o.mainOverflow="scroll";const t=Math.abs(u.value/100)*m;e&&e.target&&e.target.parentElement&&(e.target.parentElement.scrollTop=t)}function h(){o.mainOverflow="hidden",P()}function P(){p.value=requestAnimationFrame((()=>{!function(){let e=t.speed;e<0&&(e=1);Math.abs(u.value)>50&&(u.value+=50);u.value-=e/100}(),P()}))}return e.onMounted((()=>{const e=l.value,t=i.value;a.value=e.offsetHeight,s.value=t.offsetHeight,c.value=n.value.offsetHeight,m=c.value-a.value;let o=(s.value-a.value)/a.value;o-=Math.floor(o),d=103-Math.floor(100*o),h()})),e.onUnmounted((()=>{y(null)})),{...e.toRefs(t),sourceList:r,state:o,main:l,uiEle:i,container:n,scrollHeight:u,computedHeight:f,computerTranform:v,enterFn:y,outFn:h,scrollFn:function(e){requestAnimationFrame((()=>{let t=e.target.scrollTop/m*100;t>d&&(t=d),u.value=-t})),e.preventDefault(),e.defaultPrevented()}}}}),i={class:"co-time-line-container",ref:"main"},a=e.createElementVNode("span",{class:"co-time-line-header"},null,-1),s=e.createElementVNode("span",{class:"co-time-line-footer"},null,-1);var c=o.default(n,[["render",function(t,o,r,l,n,c){const p=e.resolveComponent("time-line-item");return e.openBlock(),e.createElementBlock("div",i,[a,e.createElementVNode("div",{class:"co-time-line-content",ref:"container",style:e.normalizeStyle({...t.computerTranform})},[e.createElementVNode("ul",{class:"co-time-line-ul",ref:"uiEle",style:e.normalizeStyle({top:`${t.state.firstUiTop}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.sourceList,((o,r)=>(e.openBlock(),e.createBlock(p,{data:o,direction:"center"===t.type?r%2?"left":"right":"left"===t.type?"left":"right","container-props":t.containerProps,"time-props":t.timeProps,"circle-props":t.circleProps,"media-props":t.mediaProps},null,8,["data","direction","container-props","time-props","circle-props","media-props"])))),256))],4),e.createElementVNode("ul",{class:"co-time-line-ul",style:e.normalizeStyle({top:`${t.state.seconedUiTop}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.sourceList,((o,r)=>(e.openBlock(),e.createBlock(p,{data:o,direction:"center"===t.type?r%2?"left":"right":"left"===t.type?"left":"right","container-props":t.containerProps,"time-props":t.timeProps,"circle-props":t.circleProps,"media-props":t.mediaProps},null,8,["data","direction","container-props","time-props","circle-props","media-props"])))),256))],4)],4),s,e.createElementVNode("div",{class:"co-time-line-placeholder",style:e.normalizeStyle({overflowY:t.state.mainOverflow}),onTouchstart:o[0]||(o[0]=(...e)=>t.enterFn&&t.enterFn(...e)),onTouchend:o[1]||(o[1]=(...e)=>t.outFn&&t.outFn(...e)),onMouseover:o[2]||(o[2]=(...e)=>t.enterFn&&t.enterFn(...e)),onMouseout:o[3]||(o[3]=(...e)=>t.outFn&&t.outFn(...e)),onScroll:o[4]||(o[4]=(...e)=>t.scrollFn&&t.scrollFn(...e))},[e.createElementVNode("div",{style:e.normalizeStyle({...t.computedHeight})},null,4)],36)],512)}]]);exports.default=c;