淺談vue 錨點指令v-anchor的使用
更新時間：2019年11月13日 15:02:26 作者：人堅不拆-世間僅有
今天小編就為大家分享一篇淺談vue 錨點指令v-anchor的使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
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、封裝一個anchor.js
2、在入口文件中定義
//定義錨點跳轉(zhuǎn) Vue.directive(‘a(chǎn)nchor', anchorFunc);
3、頁面中使用方式
v-anchor = “傳入的value”
使用例子：
以上這篇淺談vue 錨點指令v-anchor的使用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3和element-plus實現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實現(xiàn)一個完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue使用$emit實現(xiàn)同步調(diào)用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要給大家分享關(guān)于Vue 購物車案例的小練習(xí)，文章個悲劇購物車為標(biāo)題需求利用HTML代碼實現(xiàn)整個過程,需要的朋友可以參考一下文章的具體內(nèi)容2021-10-10
在前端開發(fā)中,實現(xiàn)自定義右鍵菜單能夠為用戶提供更多功能選項,本文就來介紹了Vue中實現(xiàn)動態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
這篇文章主要介紹了Vue的data、computed、watch源碼淺談，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
我們使用nginx部署Vue項目,實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包部署的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue.js實現(xiàn)的全選與全不選功能示例【基于elementui】
這篇文章主要介紹了vue.js實現(xiàn)的全選與全不選功能,結(jié)合實例形式分析了vue.js基于elementui實現(xiàn)全選與全不選功能的相關(guān)頁面渲染、初始化數(shù)據(jù)及功能函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue中mint-ui的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了詳解vue中的computed的this指向問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12