Vue.工程目录下设置自定义指令在哪设置

添加自定义目录：

1、项目需求：页面左侧网页内容太多，所以想在页面右侧添加一个自定义的目录，目录名对应左侧内容的小标题，点击目录左侧页面滚动到对应的内容。

2、给页面左侧的内容的每个小标题添加一个data-ref属性。

3、等左侧文章加载完成之后，用setTimeout定时器把左侧的ref属性push进一个空的数组。

4、在push完成后的数组里循环得到页面右侧的目录内容

5、然后点击某个目录时把item.ref传参进catalogTo()函数，保证左面的内容滚动到制定的位置

6、注意scrollTop()和offsetTop()的用法

  <div>

    <div class="cf" ref="previewText"  style="height:5000px"  id="header">

      文本

    </div>

    <span class="btn_run" @click="returnTop" id="searchBar">

      返回

    </span>

  </div>

</template>

<script>

export default {

  data(){

    return{

    }

  },

mounted(){

  window.addEventListener('scroll',this.btn_pos)

},

  methods:{

    returnTop(){

      document.querySelector("#header").scrollIntoView(true)

    },

    btn_pos(){

      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop

      let offsetTop = document.querySelector("#searchBar").offsetTop

      console.log(scrollTop)

      if(scrollTop<=400){

        document.querySelector("#searchBar").style.display = 'none'

      }else{

        document.querySelector("#searchBar").style.display = 'block'

        document.querySelector("#searchBar").style.top = '600px'

      }

    }

  },

  destroyed(){

    window.removeEventListener('scroll',this.btn_pos)

  }

}

</script>

<style scoped>

.btn_run{

  position: fixed

  display: none

  right: 30px

  box-sizing: border-box

  z-index: 2

  height: 50px

  width:50px

  border-radius: 5px

  border: 1px solid rgb(126, 123, 123)

  cursor: pointer

  line-height: 50px

  background-color: rgb(126, 123, 123)

  box-shadow: 0 0 14px 6px gray

  opacity: 0.3

  color: white

}

</style>