vue+elementCarousel实现幻灯⽚展⽰列表并联动时间线
⼯作中开发的⼀个⼩组件，使⽤element幻灯⽚展⽰列表，并且使⽤时间线展⽰数据所有的年份⽉份并根据是否⽀付显⽰不同的颜⾊，点击时间线上的⽉份可以跳转到对应的幻灯⽚并选中
复制代码运⾏即可
// ⽉结账单dialog
<template>
<div>
<el-dialog title="⽉结账单" width="1230px"
:visible.sync="dialogVisible" custom-class="mbb-dialog":show-close="false"
:close-on-click-modal="false">
抗日电视剧大全集最新<!--右上关闭按钮-->
<i @click='dialogVisible = false'class='el-icon-close'></i>
<!--幻灯⽚-->
<el-carousel ref='carousel'class='mbb-carousel' @change='carouselChange' indicator-position="outside":autoplay='false' arrow='always':loop='true'> <el-carousel-item v-for="(item, index) in forNum":key="index">
<div class="mbb-content">
<div class="mbb-items":class='item.id === curMonthBillId ? "mbb-curitems" : ""' @click='curMonthBillId = item.id' v-for='item in orderList':key='item.i d'>
<div class="mbb-row1">
<span class='mbb-span1'>{{h}}⽉</span>
<span class="mbb-span2">（{{ar}}年）</span>
</div>
<div class="mbb-row2">
<span class="mbb-span3">⾦额：</span>
<span class="mbb-span2">{{}}</span>
</div>
<div class="mbb-row2">
<span class="mbb-span3">⽀付状态：</span>
<span v-if='item.state === 2'class="mbb-span4">已⽀付</span>
<span v-else class="mbb-span5">待⽀付</span>
</div>
<div class="mbb-row2">
<span class="mbb-span3">⽀付时间：</span>
<span class="mbb-span2"></span>
</div>
<div class="mbb-row2" style='margin-bottom: 30px;'>
<span class="mbb-span3">结转时间：</span>
<span class="mbb-span2"></span>
</div>
<div class="mbb-row2">
<div class="mbb-row2">
<span class="mbb-span3">销售：</span>
<span class="mbb-span2"></span>
</div>
<div class="mbb-row2">
<span class="mbb-span3">会计：</span>
<span class="mbb-span2"></span>
</div>
<div class="mbb-row2">
<span class="mbb-span3">客服：</span>
<span class="mbb-span2"></span>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<!--时间线-->
<div class="mbb-timeline">
<div class="mbbt-years" v-for='(el) in years':key='el.year':style='{"width": "calc(100% / " + years.length + ")"}'>
<div class="mbbtm-year">{{el.year}}</div>
<div class="mbbt-month" v-for='(item) h':key='h'>
<div class="mbbtm-line":style='{"top": h === 1 ? "2px" : ""}'>
<!-- s时间线的图标-->
<span v-if='item.icon === "mbbtmi-gray"'class='mbbtmi-gray'
:style='{"width": h === 1 ? "14px" : "10px", "height": h === 1 ? "14px" : "10px"}'></span>
<i @click='ar, h)' v-else class='mbbtmi-icon':class='item.icon':style='{"font-size": h === 1 ? "14px" : "10px", "color ": item.icon === "el-icon-success" ? "#52C41A" : item.icon === "el-icon-remove" ? "#FFBF00" : "#D8D8D8"}'></i>
<!--时间线线条-->
<span class='mbbtml-line':style='{"height":"2px",
"background-color": item.icon ==="el-icon-success"?"#52C41A": item.icon ==="el-icon-remove"?"#FFBF00":"#D8D8D8","display":"inline-bl ock"}'></span>
<!--时间线下⽅的⽉份↓-->
<span v-if='item.icon === "mbbtmi-gray"'class='mbbtm-span2'>{{h}}⽉</span>
<span v-else @click='ar, h)' style='cursor: pointer;'class='mbbtm-span2'>{{h}}⽉</span>
</div>
</div>
</div>
姜子牙剧情</div>
</el-dialog>
</div>
</template>
<script>
export default{
name:'monthlyBalanceBill',
methods:{
/* 点击时间线跳转幻灯⽚页⾯事件 */
jumpBill(year, month){// 接收当前点击的年份与⽉份
this.allList.forEach((item2, index)=>{// 遍历所有数据，当匹配上传⼊的年⽉后，将orderList数据替换为选择年⽉所在的数组
item2.forEach(el =>{
ar === year && el.month === month){
this.$refs.carousel.setActiveItem(index)
this.curMonthBillId = el.id // 选中当前点击的⽉份
}
})
})
},
/* 幻灯⽚change回调 */
carouselChange(index1, index2){
},
getMonthBillList(){
let arr =[
{id:'1243fdsg45y56', monthNum:'202104', money:'523', state:1,},
{id:'3456e4tgryhtr', monthNum:'202007', money:'525', state:1,},
{id:'3456e4tgryhtr', monthNum:'202007', money:'525', state:1,},
{id:'34665rutujyyt', monthNum:'202008', money:'526', state:2,},
{id:'346457tjhgrfg', monthNum:'202005', money:'527', state:1,},
{id:'245etrdyhtyuj', monthNum:'202006', money:'528', state:2,},
{id:'6574tryhtuhjf', monthNum:'202009', money:'529', state:1,},
{id:'3trhgjdfgthhg', monthNum:'202010', money:'521', state:1,},
{id:'236yhftgghgjj', monthNum:'202111', money:'523', state:1,},
{id:'68yhgsdftgr3s', monthNum:'202101', money:'522', state:2,},
{id:'fhggreg5ydfgd', monthNum:'202102', money:'525', state:1,},
{id:'124rwfrdhfjjk', monthNum:'202103', money:'522', state:1,}
]// 后台请求来的数据这⾥写死
arr.sort((a, b)=>{// 数组排序
return hNum)-hNum)
})
this.forNum =(arr.length %4)===0?(arr.length /4):parseInt(arr.length /4)+1
let jsonArr =[]// 存放每4个⼀组的⽉结账单
let years =[]// 存放账单所有不重复的年份
let months ={}// 存放每年有账单的⽉份
arr.forEach((item, index)=>{
if(years.ar)===-1){
years.ar)// 封装时间线数据
ar]=[]
}
if(ar].h)===-1){
ar].push(`${h}${item.state ===1?false:true}`)// 封装时间线数据}
jsonArr.push(item)
if((index +1)%4===0){// 将列表数据封装为4个数组为⼀个元素的数组集合
this.allList.push(jsonArr)
jsonArr =[]
}else if(index === arr.length -1){
this.allList.push(jsonArr)
}
})
// 关于时间线封装美国参议院和众议院的区别
// 先遍历取出所有的年份数组与⽉份数组 years和months
// 循环外循环为years 内循环固定循环12次分别判断每个⽉是否有账单
years = years.sort()
years.forEach((item, index)=>{
let json ={year: item, month:[]}
let monthArr =[]
for(let i =1; i <=12; i++){
if(months[item].indexOf(`${i}true`)!==-1){
monthArr.push({month: i, icon:'el-icon-success'})// 有账单并且已⽀付时间线显⽰绿⾊}else if(months[item].indexOf(`${i}false`)!==-1){
monthArr.push({month: i, icon:'el-icon-remove'})// 未⽀付账单显⽰黄⾊
}else{
monthArr.push({month: i, icon:'mbbtmi-gray'})// 如果没有改⽉份的⽉结账单则时间线显⽰灰⾊}
}
if(index === years.length -1){
monthArr[11].hidden =true// 隐藏最后⼀年的最后⼀个⽉的线条如果是最后⼀年的最后⼀个⽉则会有该属性}
})
},
openDialog(){
this.dialogVisible =true
}
},
},
data(){
return{
curMonthBillId:'',// 当前选中的⽉账单id allList:[],// 存放所有数据的数组集合， forNum:1,// 幻灯⽚总页数
curCarouselPage:0,// 当前carousel 页数 years:[],// 时间线数据模型
dialogVisible:false,
orderList:[]// 当前展⽰的账单列表
}
}
}
</script>
<style lang="less">
.mbb-dialog {
.mbb-timeline {
display: flex;
height:55px;
.mbbtmi-gray {
display: inline-block;
border-radius:50%;
background-color: #D8D8D8;
祝老师教师节的祝福语}
.mbbtmi-icon {
cursor: pointer;
}
.mbbtm-span2 {
position: absolute;
bottom:-20px;
color: #4A4A4A;
font-size:12px;
}
.mbbtm-line {
display: flex;
align-items: center;
position: relative;
}
.mbbtml-line {
width:100%;
}
.mbbt-month {
display: inline-block;
width:calc(100%/12)
}
.mbbtm-year {
color: #4A4A4A;
font-size:12px;
}
}
.
el-carousel__container {
height:380px;
}
.el-carousel__indicators {
display: none;
}
.mbb-span5 {
color: #F5A623;
font-size:14px;
}
.mbb-span4 {
color: #52C41A;
font-size:14px;
}
.mbb-span3 {
.mbb-span3 {
color: #9B9B9B;
font-size:14px;
display: inline-block;
width:70px;
text-align: right;
}
.
mbb-row2 {
margin-bottom:20px;
}
.mbb-row2:last-child {
margin-bottom:0;
}
.mbb-span2 {
color: #4A4A4A;
font-size:14px;
}
.mbb-span1 {
color: #4A4A4A;
玥玛安防font-size:18px;
font-weight:600;
}
.mbb-row1 {
margin-bottom:15px;
}
.mbb-items {
padding:15px 20px;
background-color: #FFFFFF;
border:1px dashed rgba(217,217,217,1); width:219px;
margin-right:20px;
}
.mbb-curitems {
顺风速运单号查询border-color: #FF6010!important;
}
.mbb-content {
padding:20px 020px 20px;
border:1px dashed rgba(217,217,217,1); background-color:rgba(252,252,252,1); display: flex;
flex-direction: row;
margin-bottom:10px;
position: relative;
}
.el-dialog__body {
padding:20px 40px;
}
.el-icon-close {
position: absolute;
right:20px;
top:20px;
font-size:22px;
cursor: pointer;
}
.
el-icon-close:hover {
color: #409eff;
}
}
</style>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论