vue中使用锚点定位

<template>
<div>
<div>
  <a href="javascript:void(0)" v-anchor="index" v-for="index in 20"> {{index}} </a>
</div>
 <div :id="'anchor-'+index" class="item" v-for="index in 20" >{{index}}</div>
</div>
</template>
<script>
import Vue from 'vue'
import $ from 'jquery'
Vue.directive('anchor', {
  inserted: function (el, binding) {
    el.onclick = function () {
      document.documentElement.scrollTop = $('#anchor-' + binding.value).offset().top
    }
  }
})
export default{
  data () {
    return {

    }
  }
}
</script>
<style>
.item{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
}

</style>

本文参考链接:https://blog.csdn.net/Null_Bu...

原文链接:segmentfault.com

上一篇:【TypeScript 演化史 -- 3】标记联合类型 与 never 类型
下一篇:神奇的 Promise —— 一次异步代码的单元测试

相关推荐

官方社区

扫码加入 JavaScript 社区