淺談vue 錨點(diǎn)指令v-anchor的使用
更新時(shí)間:2019年11月13日 15:02:26 作者:人堅(jiān)不拆-世間僅有
今天小編就為大家分享一篇淺談vue 錨點(diǎn)指令v-anchor的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
如下所示:
export default { inserted: function(el, binding) { el.onclick = function() { let total; if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentElement.scrollTop || document.body.scrollTop; let step = total / 50; if (total > distance) { (function smoothDown() { if (distance < total) { distance += step; document.documentElement.scrollTop = distance; setTimeout(smoothDown, 5); } else { document.documentElement.scrollTop = total; } })(); } else { let newTotal = distance - total; step = newTotal / 50; (function smoothUp() { if (distance > total) { distance -= step; document.documentElement.scrollTop = distance; setTimeout(smoothUp, 5); } else { document.documentElement.scrollTop = total; } })(); } } } }
1、封裝一個(gè)anchor.js
2、在入口文件中定義
//定義錨點(diǎn)跳轉(zhuǎn) Vue.directive(‘a(chǎn)nchor', anchorFunc);
3、頁面中使用方式
v-anchor = “傳入的value”
使用例子:
以上這篇淺談vue 錨點(diǎn)指令v-anchor的使用就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-router為每個(gè)路由配置各自的title
這篇文章主要介紹了如何使用vue-router為每個(gè)路由配置各自的title,及使用vue router的方法,需要的朋友可以參考下2018-07-07treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12vue select組件的使用與禁用實(shí)現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04