scroll-segment-button/scroll-segment-button.vue

<template>
    <div class="vm-scroll-segment-button" @click="clickHandler($event)" :class="{[activeClass]:isActive}">
        <slot></slot>
    </div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
  /**
   * @component ScrollSegment/ScrollSegmentButton
   * @description
   *
   * ## 滑动片段组件 / ScrollSegmentButton
   *
   * */
  export default {
    name: 'ScrollSegmentButton',
    inject: {
      scrollSegmentComponent: {
        from: 'scrollSegmentComponent',
        default: null
      }
    },
    data () {
      return {
        activeClass: '',
        isActive: false,
        rect: null          // 当前组件的位置关系
      }
    },
    methods: {
      /**
       * 当点击当前元素
       * */
      clickHandler ($event) {
        this.$emit('click', $event)
        this.$emit('onSelect', $event)
        this.scrollSegmentComponent && this.scrollSegmentComponent.refresh(this._uid, this.rect)
      },
      setState (id) {
        this.isActive = (this._uid === id)
      }
    },
    mounted () {
      if (this.scrollSegmentComponent) {
        this.scrollSegmentComponent.record(this)
        this.activeClass = this.scrollSegmentComponent.activeClass
        // 获取当前组件的尺寸及距离页面的位置
        this.rect = {
          left: this.$el.offsetLeft,
          width: this.$el.offsetWidth
        }
      }
    }
  }
</script>