输入框滚动到屏幕中间在获取焦点的时候--全局VUE指令

最新推荐文章于 2025-02-18 23:34:27 发布

紫微前端

最新推荐文章于 2025-02-18 23:34:27 发布

阅读量350

点赞数

分类专栏：常用代码片段文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/124843669

版权

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

// 输入框滚动到屏幕中间在获取焦点的时候--全局指令
Vue.directive('gomiddle', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function(el) {
        el.addEventListener('click', function() {
            setTimeout(function() {
                let top = el.offsetTop;
                let windowScrollTop = document.documentElement.scrollTop;
                let windowHeight = window.innerHeight;
                document.documentElement.scrollTop = windowScrollTop + ((top - windowScrollTop) - (windowHeight / 2))
            }, 1000)
        }, false)
    }
})


//<input type="text" v-gomiddle />