组件开发

<template>
<div class="swiperpa">
<div class="timeline">
<div class="events-wrapper">
<div class="line" ref='linewidth'>
</div>
<ul>
<li v-for="(point,index) in countpoint" ref='dot' v-on:mouseover="addEffect(point,index)" @click="goTo(index)" :class="{on:index === nowIndex}"></li>
<div class='pulley'></div>
</ul>
</div>
<ul class="timeline-navigation">
<li class="prev" @click="goToPrev()"> </li>
<li class="next" @click="goToNext()" ></li>
</ul>
<div class="play" ref = "play" @click="play()"></div>
<div class="shut" ref = "shut" @click="shut()"></div>
</div>
</div>
</template>
<script>
export default {
props: {
inv: {
type: Number,
default: 1000,
},
countpoint:{
type:Number,
default:50,
},
},
data() {
return {
nowIndex: 0,
curPage:1,
pageNum:10,
// points: [
// new BMap.Point(117.227819, 23.814327),
// new BMap.Point(117.171452, 23.800036),
// new BMap.Point(117.132368, 23.791609),
// new BMap.Point(117.076919, 23.764658),
// new BMap.Point(117.024827, 23.754510),
// new BMap.Point(116.981047, 23.739533),
// new BMap.Point(116.939091, 23.717617),
// new BMap.Point(116.900199, 23.699399),
// new BMap.Point(116.885031, 23.689196),
// new BMap.Point(116.874584, 23.679668),
// new BMap.Point(116.811841, 23.626940),
// new BMap.Point(116.759632, 23.604713),
// new BMap.Point(116.725061, 23.587160),
// new BMap.Point(116.651402, 23.566650),
// new BMap.Point(116.595323, 23.545934),
// new BMap.Point(116.565463, 23.533553),
// new BMap.Point(116.552337, 23.519046),
// new BMap.Point(116.544596, 23.508704),
// new BMap.Point(116.537630, 23.464337),
// new BMap.Point(116.528264, 23.443634),
// new BMap.Point(116.518571, 23.425543),
// new BMap.Point(116.502256, 23.414608),
// new BMap.Point(116.429954, 23.388459),
// new BMap.Point(116.388039, 23.368854),
// new BMap.Point(116.352537, 23.347284),
// new BMap.Point(116.281605, 23.327247),
// new BMap.Point(116.227800, 23.293717),
// new BMap.Point(116.214108, 23.280499),
// ]
}
},
created() {

},
computed: {
nextIndex() {
if (this.nowIndex === this.countpoint - 1) {
return 0
} else {
return this.nowIndex + 1
}
}
},
methods: {
drawLine() {
this.$refs.linewidth.style.width = (this.countpoint - 1) * 0.3 + "rem"
},
permutation() {
// console.log(this.$refs.dot, 'this.refs.dot')
var j = -1; //从初始点开始
this.$refs.dot.forEach((ele, ind) => {
j++
ele.style.left = j * 0.3 + "rem" //分隔排列

  })
},
addEffect(evnet, point, ind) {
  // console.log(event.target, point, 'event')
},
goTo(index) {
  this.nowIndex = index
  this.$emit("onchange", index)
  // console.log(index,'index')
  // this.$emit("change", this.index)
},
goToPrev() {
  //判断切换
  if( this.$refs.play.style.display = "none"){
     this.$refs.shut.style.display = "none"
     this.$refs.play.style.display = "block"
  }
  clearInterval(this.invId)
  this.nowIndex = 0;
  if(this.curPage >1){
      this.curPage -=1
      // console.log(this.curPage,"this.curPage")
      this.$emit("changepage", this.curPage)
  }


  // this.$refs.line.style = "transition:all .5s;transform:translateX(-900px)"
  //发送请求获取新的包
  //告诉父组件一个事件，事件包括（发送请求 请求页面条数，将请求的放数组中去,画线要放到计算属性里面，points改变而改变）
},
goToNext() {
  // console.log(this.curPage ,"goNext")
  if( this.$refs.play.style.display = "none"){
     this.$refs.shut.style.display = "none"
     this.$refs.play.style.display = "block"
  }
  clearInterval(this.invId)
  this.nowIndex = 0;
  if(this.curPage >= 1 && this.curPage < this.pageNum){
      this.curPage += 1
      // console.log(this.curPage,'this.curpage')
      this.$emit("changepage", this.curPage)
  }
  // this.$refs.line.style = "transition:all .5s;transform:translateX(-900px)"
},
play() {
  // console.log("play")
  // console.log('this.$refs.play')
  this.$refs.play.style.display = "none"
  this.runInv()

  this.$refs.shut.style.display = "block"
},
shut() {
  this.clearInv()
  this.$refs.shut.style.display = "none"
  this.$refs.play.style.display = "block"
},
runInv() {
  let    timeSpeed = this.inv
  this.invId = setInterval(() => {
    this.goTo(this.nextIndex)

  }, timeSpeed )
},
clearInv() {
  clearInterval(this.invId)
},

},
// watch: {
// curIndex() {
// this.$emit("onchange", this.curIndex)
// }
// },
mounted() {
this.$nextTick(() => {
this.permutation();
this.drawLine()
})
}
}

</script>
<style lang="scss" scoped>
@import './src/assets/css/global.scss';
.swiperpa {
// @media screen and (max-device-width: 3000px) and(min-device-width:1920px){
// .timeline {
// width: 18.87rem;//边框也算
// }
// }
@media screen and (max-device-width: 1920px) and(min-device-width:0px){
.timeline {
width: 15.87rem;//边框也算
}
}

.timeline {
position: relative;
height: 50px;
margin: 0 auto;
// border: 1px solid red;

.events-wrapper {
  position: relative;
  height: 100%; // margin: 0 auto;
   // overflow: hidden;
  font-size: 0;
  // border: 1px solid blue;
  margin: 0 0.48rem;
  .line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0.02rem;
    background: #d9d9d9;
    transition: transform 0.4s;
    width: 100%;
  }
  li {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20px;
    height: 12px;
    width: 12px;
    border-radius: 8px;
    border: 0.02rem solid #dfdfdf;
    background-color: #fff;
    z-index: 100; // left:100px;
    cursor: pointer;
  }
  .on{
     border: 2px solid red;
  }
  .pulley {
    position: absolute;
    top: 20px;
    height: 30px;
    width: 30px; // background-color:red;
  }
}
.timeline-navigation {
  .prev {
    position: absolute;
    left:0.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid red;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }
  .next {
    position: absolute;
    right: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid red;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }
}
.play {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin-left: -40px;
  height: 30px;
  width: 30px;
  background-color: red;
  cursor: pointer;
}
.shut {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin-left: -40px;
  height: 30px;
  width: 30px;
  background-color: blue;
  cursor: pointer;
  display:none;
}

}
}

</style>