vue版本左右按钮点击移动 时间轴------ Timeline

vue版本左右按钮点击移动 时间轴------ Timeline

之前做的有不少没完善--修改版本

20220409_201448

这个是引入背景 

<template>
  <div class="hello">
    <span
      class="span1"
      @click="leftBtn(1)"
      :class="{ 'btn-onlyRead': disabledLeft == true }"
    >
      《</span
    ><span
      class="span2"
      @click="leftBtn(2)"
      :class="{ 'btn-onlyRead': disabledRigth == true }"
      >》</span
    >
    <div class="RemSoteSensiRng">
      <ul :style="actived">
        <li class="li"></li>
        <li
          v-for="(item, i) in month"
          :key="i++"
          :style="{ width: widthLi + 'px' }"
          :class="{ active: isActive == i }"
          @click="iconClick(item, i)"
        >
          {{ item.timestamp }}
        </li>
        <li class="li"></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "RemSoteSensiRng",
  data() {
    return {
      isActive: 1, //当前选中样式
      num: 0, //计数器
      disabledLeft: false, //左边按钮禁用
      disabledRigth: false, //右边按钮禁用
      widthLi: 50, //一个li宽度
      actived: {
        width: 0,
        marginLeft: 0,
        transition: "",
      },
      month: [
        {
          timestamp: "01",
        },
        {
          timestamp: "02",
        },
        {
          timestamp: "03",
        },
        {
          timestamp: "04",
        },
        {
          timestamp: "05",
        },
        {
          timestamp: "06",
        },
        {
          timestamp: "07",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
        {
          timestamp: "08",
        },
        {
          timestamp: "09",
        },
        {
          timestamp: "10",
        },
        {
          timestamp: "11",
        },
        {
          timestamp: "12",
        },
      ],
    };
  },
  watch: {
    // 监听计算
    // isActive: {
    //   handler: function (val, oldVal) {
    //     console.log(val+"      2")
    //     console.log(oldVal);
    //     if (val < this.month.length) {
    //       this.disabledLeft = false;
    //     } else {
    //       this.disabledLeft = true;
    //       console.log(val+"     1 3")
    //     }if (val > 1) {
    //       this.disabledRigth= false;
    //     } else {
    //       this.disabledRigth = true;
    //       console.log(val+"     1 3")
    //     }
    //   },
    //   // 深度观察监听
    //   deep: true,
    //   immediate: true,
    // },
  },

  methods: {
    //按钮点击
    leftBtn(val) {
      //val==1 左边按钮点击 数字变小
      if (val == 1 && this.isActive > 1) {
        this.iconClick(null, this.isActive - 1);
      }
      //val==2 右边按钮点击数字变大
      if (val == 2 && this.isActive < this.month.length) {
        this.iconClick(null, this.isActive + 1);
      }
      this.keyBtn();
    },

    iconClick(item, i) {
      this.actived.marginLeft = -this.widthLi * i + "px";
      this.isActive = i;
      this.keyBtn();
    },
    //左右按钮点击事件失效条件
    keyBtn() {
      console.log(this.isActive);
      // 选中下标小于1时候，锁住左边点击事件
      if (this.isActive <= 1) {
        this.disabledLeft = true;
      } else {
        this.disabledLeft = false;
      }
      // 选中下标大于数组长度时候，锁住右边点击事件
      if (this.isActive >= this.month.length) {
        this.disabledRigth = true;
      } else {
        this.disabledRigth = false;
      }
    },
  },
  mounted() {
    this.keyBtn(); //由于默认选中第一个，左边事件先执行一次，让左边的按钮静止状态
    // this.iconClick();
    this.actived.width = this.month.length * this.widthLi + 480 + "px";
  },
  beforeCreate() {},
};
</script>
<style  scope>
.hello {
  position: relative;
  height: 50px;
  width: 1000px;
  background: rgb(125, 125, 163);
}
.RemSoteSensiRng {
  margin: 0 0 0 100px;
  height: 50px;
  width: 800px;
  background: #1a2637;
  overflow: hidden;
}
ul {
  margin: 0;
  padding: 0;
  margin-left: 0px;
  width: 1200px;
  height: 51px;
}
.li {
  /* 占位宽度 */
  width: 240px;
  border-bottom: 0px red solid;
  /* background: blueviolet; */
}
li {
  text-align: center;
  border-bottom: 1px rgb(187, 141, 14) dashed;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  /* background: aquamarine; */
  float: left;
  line-height: 50px;
  list-style: none;
  color: #969292;
  cursor: pointer;
}
.active {
  background: url("./../assets/date-icon.png") bottom no-repeat;
  color: rgb(232, 231, 238);
  /* transition: background 0.3s ease 0.4s; */
}
/* span {
  position: absolute;
  line-height: 50px;
} */
.span1 {
  float: left;
  line-height: 50px;
  margin: 0 0 0 50px;
  cursor: pointer;
}
.span2 {
  float: right;
  line-height: 50px;
  margin: 0 50px 0 0;
  cursor: pointer;
}
.btn-onlyRead {
  cursor: not-allowed !important;
}
.btn-onlyRead:hover {
  pointer-events: none !important;
}
</style>