• nav.vue

<template>
  <div>
    <div class="topic-list-inner">
      <div class="nav" ref="nav">
        <div class="box" v-for="(item,index) in list" @click="queryTopic(item,index)">
          <div class="item" :class="{active:navActiveIndex==index}">{{item.title
 
}}</div>
        </div>
      </div>

      <div class="nav-right-arrow rotateUp" @click="openTagModal(list)">
        <img src="./images/drop-down.png" alt="" class="drop-down" :class="{reverse:showModal}">
      </div>

      <!-- use the modal component, pass in the prop -->
 

      <modal-tag v-if="showModal" @close="showModal = false" :query="queryTopic"
                 :my-tag="selectTag" :active-index="navActiveIndex"
      ></modal-tag>

      <!--傳遞子元件的方法，引數-->
      <!--queryTopic:方法-->
      <!--selectTag：資料-->

    </div>
  </div
 
>
</template>
<script>
  import modalTag from 'components/navModal/navModal.vue';
  import AutoScroll from 'assets/script/autoScroll'

  let autoScrollInstance = null  //關鍵點：在載入的外掛之前的就要定義個變數的，如果定在data中 ，則會報錯
  export default {
    name: 'navScroll',
    data() {
      return {
        list: [ //自己定義的假資料，實際是獲取的資料
          {title: 'AAAA', id: 1},
          {title: 'BBBB', id: 2},
          {title: 'CCCC', id: 3},
          {title: 'DDDD', id: 4},
          {title: 'EEEE', id: 5},
          {title: 'FFFF', id: 6},
          {title: 'HHHH', id: 7},
          {title: 'MMMM', id: 8},
          {title: 'RRRR', id: 9},
          {title: 'QQQQ', id: 10},
          {title: 'UUUU', id: 11},
          {title: 'TTTT', id: 12},
          {title: 'NNNN', id: 13},
          {title: 'OOOO', id: 14},
          {title: 'PPPP', id: 15},
          {title: 'ZZZZ', id: 16},
        ],
        navActiveIndex: 0, //當前高亮的tab選項卡index
        showModal: false, //是否顯示modal
        selectTag: null,   //傳遞個子元件（modal）的資料的
      }
    },
    methods: {
      //
      queryTopic(data, index) {
        //點選誰，誰就高亮 ，定一個變數，click事件的賦值使其相等，而在:class 中 判斷是否相等，即可
        this.navActiveIndex = index;

        //外掛的調取方法
        if (autoScrollInstance) { //確保的外掛載入成功
          autoScrollInstance.scrollTo(this.$refs.nav.childNodes[index])
        }

      },

      //點選modal的事件
      openTagModal(tag) {
        event.stopPropagation() //點選箭頭，阻止事件向下傳遞
        this.showModal = true //modal的出現
        this.selectTag = tag; //傳值給modal子元件
      },
    },
    components: {
      'modal-tag': modalTag,  //元件
    },
    mounted() {
      //寫在掉介面的裡面的
      this.$nextTick(() => {
        autoScrollInstance = new AutoScroll(this.$refs.nav, {spaceBetween: 0})//節點 nav
      })
    }
  }
</script>
<style lang="scss" scoped>
  .topic-list-inner {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
  }

  .nav {
    display: flex;
    width: 7rem;
    overflow-x: auto;
    overflow-y: hidden;
    .box {
      white-space: nowrap;
      font-size: 0.3rem;
      padding: 0 0.3rem;
      height: 0.9rem;
      line-height: 0.9rem;
      color: #333333;
      .item {
        height: 100%;
        &.active {
          color: #fe3e62;
          border-bottom: 1.5px solid #fe3e62;
        }
      }
    }
  }

  .nav-right-arrow {
    position: fixed;
    right: 0;
    top: 0;
    width: 1rem;
    height: 0.9rem;
    /*background: #fff;*/
    background-image: linear-gradient(to right, rgba(#fff, 0), #fff 30%, #fff);

    display: flex;
    align-items: center;
    justify-content: center;

    .drop-down {
      width: 0.22rem;
      /*padding-top: 0.35rem;*/
      /*margin-left: 0.22rem;*/
      transform: rotate(0deg);
      transition: all 0.5s;
      &.reverse {
        transform: rotate(-180deg);
      }
    }
  }

</style>

• navModal.vue

<template>
  <transition name="modal">
    <div class="modal-mask" @click="$emit('close')">
      <div class="modal-wrapper">
        <div class="modal-container cf">
          <div v-for='(list,index) in myTag' class="list-title"
               @click="query(list,index)"
               :class="{active:activeIndex===index}">
            {{list.title}}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">

  export default {
    props: ['myTag', 'activeIndex', 'query'], //接受父元件 方法 資料
    data() {
      return {
        navActiveIndex: 0, //初始化預設
      }
    },
    mounted() {

    },
    methods: {}

  }
</script>
<style scoped lang="scss">

  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, .5);*/
    /*display: table;*/
    transition: opacity .3s ease;
  }

  .modal-wrapper {
    /*display: table-cell;*/
    /*vertical-align: middle;*/
    padding-top: 0.91rem;
  }

  .modal-container {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, .33);*/
    transition: all .3s ease;
    padding: 0 0.1rem 0.4rem 0.22rem;
    font-family: Helvetica, Arial, sans-serif;
    .list-title {
      color: #666;
      border-radius: 4px;
      font-size: 0.26rem;
      border: 1px solid #999;
      height: 0.57rem;
      width: 1.93rem;
      text-align: center;
      float: left;
      line-height: 0.57rem;
      margin: 0.4rem 0.2rem 0 0.2rem;
      &.active {
        color: #fe3e62;
        border: 1.5px solid #fe3e62;
      }
    }
  }

  .myTagClose {
    color: #fff;
    font-size: 0.6rem;
    margin: 0.4rem auto 0 auto;
    height: 1rem;
    width: 1rem;
    text-align: center;
  }

  .modal-default-button {
    float: right;
  }

  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    transform: translateY(-0.9rem);
    opacity: 0;
  }
</style>

• autoScroll.js

export default function autoScroll(dom,options){
  var options=options||{};
  var defaults={
    spaceBetween:15,
    duration:600,
  };
  var settings = $.extend( {}, defaults, options );



  var $container = $(dom);

  var $item = $container.children();
  $item.css({
    margin:"0 0"
  });
  $item.first().css({
    "margin-left":"0"
  });
  $item.last().css({
    "margin-right":"0"
  });
  var _this=this;
  var cW = $container.outerWidth();
  $item.on('click',function(){
    scrollTo(this);
  });


  this.scrollTo=function(dom){
    scrollTo(dom);
  };

  function scrollTo(dom){
    //console.log($container.get()[0].scrollWidth);
    //console.log($(this).position().left);
    var itemPL=$(dom).position().left;
    var containerSl=$container.scrollLeft();

    var itemW=$(dom).outerWidth();

    var containerW=$container.outerWidth();
    //console.log(containerW)
    //var d=$container.scrollLeft();

    //$container.animate({scrollLeft: itemPL+containerSl-containerW/2+itemW/2}, 800);
    $container.animate({scrollLeft: itemPL+settings.spaceBetween+containerSl-containerW/2+itemW/2}, settings.duration);
  }


}