cione-comp-lib/lib/packages/co-time-line/time_item.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 i={data:{type:Object,default:{time:"时间",title:"标题",type:"text",text:"内容",imgSrc:"图片地址",videoSrc:"视频地址"}},direction:{type:String,default:"right"},timeProps:{type:Object,default:{width:100,fontSize:16,color:"rgb(78, 229, 247)",fontWeight:"normal",fontFamily:"微软"}},circleProps:{type:Object,default:{size:36,url:"/data/web/components/images/bg.png",lineColor:"rgba(0, 69, 89, 1)"}},containerProps:{type:Object,default:{width:400,minHeight:120,background:"/data/web/components/images/container_bg.png",marginBottom:10,translateX:0,fontSize:20,color:"rgb(78, 229, 247)",fontWeight:"bolder",fontFamily:"微软",textSize:16,textColor:"rgb(78, 229, 247)",textWeight:"normal",textFamily:"微软"}},mediaProps:{type:Object,default:{width:200,height:120}}},o=e.defineComponent({name:"TimeLineItem",props:i,setup(t){const i=e.computed((()=>{let e="row",i=t.timeProps.width+4+t.circleProps.size/2+1;const o=t.containerProps.width-t.timeProps.width-t.circleProps.size-14;return"left"==t.direction&&(e="row-reverse",i=o+4+t.circleProps.size/2+1),{"--transform":`-${i}px`,"--direction":e}})),o=e.computed((()=>({"--width":`${t.containerProps.width}px`,"--minHeight":`${t.containerProps.minHeight}px`,"--marginBottom":`${t.containerProps.marginBottom}px`,"--bg":`url(${t.containerProps.background})`,"--padding":`6px ${t.containerProps.padding||2}px`}))),n=e.computed((()=>({"--width":`${t.timeProps.width}px`,"--fontSize":`${t.timeProps.fontSize}px`,"--fontColor":`${t.timeProps.color}`,"--fontWeight":`${t.timeProps.fontWeight}`}))),r=e.computed((()=>({"--size":`${t.circleProps.size}px`,"--url":`url(${t.circleProps.url})`,"--lineColor":`${t.circleProps.lineColor}`}))),l=e.computed((()=>({"--translate":`translate3d(${t.containerProps.fontLeft}px, ${t.containerProps.fontTop}px, 0)`,"--fontSize":`${t.containerProps.fontSize}px`,"--fontColor":`${t.containerProps.color}`,"--fontWeight":`${t.containerProps.fontWeight}`,"--fontFamily":`${t.containerProps.fontFamily}`}))),a=e.computed((()=>({"--direction":`${t.containerProps.direction||"row"}`,"--fontSize":`${t.containerProps.textSize}px`,"--fontColor":`${t.containerProps.textColor}`,"--fontWeight":`${t.containerProps.textWeight}`,"--fontFamily":`${t.containerProps.textFamily}`,"--marginTop":`${t.containerProps.textMarginTop||0}px`,"--textDirection":`${t.containerProps.textDirection}`}))),c=e.computed((()=>({"--marginTop":`${t.mediaProps.marginTop||0}px`,"--marginLeft":`${t.mediaProps.marginLeft||0}px`,"--marginRight":`${t.mediaProps.marginRight||0}px`,"--width":`${t.mediaProps.width}px`,"--height":`${t.mediaProps.height}px`}))),m=e.computed((()=>t.data.text.split("\\n")));return{...e.toRefs(t),textList:m,containerStyle:i,contentContainerStyle:o,timeTextStyle:n,circleStyle:r,titleStyle:l,textStyle:a,mediaStyle:c}}}),n={class:"co-time-line-item-circle-container"},r=["src"],l=["src"],a=["src"];var c=t.default(o,[["render",function(t,i,o,c,m,p){return e.openBlock(),e.createElementBlock("li",{class:"co-time-line-item-container",style:e.normalizeStyle({...t.containerStyle,...t.contentContainerStyle})},[e.createElementVNode("p",{class:"co-time-line-item-time",style:e.normalizeStyle({...t.timeTextStyle})},e.toDisplayString(t.data.time),5),e.createElementVNode("div",n,[e.createElementVNode("span",{class:"co-time-line-item-circle",style:e.normalizeStyle({...t.circleStyle})},null,4),e.createElementVNode("div",{class:"line",style:e.normalizeStyle({...t.circleStyle})},null,4)]),e.createElementVNode("div",{class:"co-time-line-item-content-container",style:e.normalizeStyle({...t.contentContainerStyle})},[e.createElementVNode("p",{class:"co-time-line-item-title",style:e.normalizeStyle({...t.titleStyle})},e.toDisplayString(t.data.title),5),"img"===t.data.type?(e.openBlock(),e.createElementBlock("div",{key:0,class:"co-time-line-item-img",style:e.normalizeStyle({...t.mediaStyle})},[e.createElementVNode("img",{src:t.data.imgSrc||t.data.text,alt:""},null,8,r)],4)):"video"===t.data.type?(e.openBlock(),e.createElementBlock("div",{key:1,class:"co-time-line-item-video",style:e.normalizeStyle({...t.mediaStyle})},[e.createElementVNode("video",{playsinline:"true","webkit-playsinline":"true","x5-playsinline":"true",tabindex:"2",mediatype:"video",src:t.data.videoSrc||t.data.text},null,8,l)],4)):"mix"===t.data.type?(e.openBlock(),e.createElementBlock("div",{key:2,class:"co-time-line-item-mix-container",style:e.normalizeStyle({...t.textStyle})},[e.createElementVNode("img",{src:t.data.imgSrc,style:e.normalizeStyle({...t.mediaStyle})},null,12,a),e.createElementVNode("p",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.textList,(t=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t),1)))),256))])],4)):(e.openBlock(),e.createElementBlock("p",{key:3,class:"co-time-line-item-text",style:e.normalizeStyle({...t.textStyle})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.textList,(t=>(e.openBlock(),e.createElementBlock("span",null,e.toDisplayString(t),1)))),256))],4))],4)],4)}]]);exports.Props=i,exports.default=c;