提示消息无缝向上滚动（vue）

<div class="order-tips__message-item"
        :class="getClass(index)"
        v-for="(orderTip, index) in tips"
        :key="index">
        {{orderTip[]}}
</div>

<script>
export default {
  props: ['lbxxzsList', 'orderNum'],
  data() {
    return {
      index: ,
　　　 tips: ['提示1', '提示2', '提示3']
    };
  },
  computed: {
    maxIndex() {
      return this.tips.length - ;
    },
  },
  methods: {
    getClass(index) {
      if (this.maxIndex === ) {
        return {};
      }
      return {
        'order-tips__message-item--slidein': index === this.index,
        'order-tips__message-item--slideout': index === (this.index - ) || (this.index ===  && index === this.maxIndex),
      };
    },
  },
  mounted() {
    setInterval(() => {
      const { index, maxIndex } = this;
      this.index = index < maxIndex ? index +  : ;
    }, );
  },
};
</script>

.order-tips__message {
  position: relative;
}
.order-tips__message-item {
  position: absolute;
  top: 17px;
  opacity: ;
}
.order-tips__message-item--slidein {
  top: ;
  opacity: ;
  transition: top 1s, opacity 1s;
}
.order-tips__message-item--slideout {
  top: -16px;
  opacity: ;
  transition: top 1s, opacity 1s;
}