如何在vue.js中使用侦听器处理滚动和调整窗口大小等事件 [英] how to use listeners in vue.js for events like scroll and windows resizing

问题描述

您好，我正在学习vuejs，并将一个项目转换为vuejs，我想知道我可以在方法中编写自定义函数，并在挂接的钩子中调用这些函数，我想知道如何在vuejs中使用侦听器.

Hello i am learning vuejs and was converting one of my projects into vuejs i wanted to know that i can write my custom functions in methods and call those in mounted hook i wanted to know how do i use listeners in vuejs.

我也可以通过在vue项目中导入来使用我的jquery

also can i used my jquery by importing in vue project

vue网站上的事件侦听器文档仅说明了v-on和click示例，但没有适用于Windows侦听器的示例

The event listener documentation on vue website states only v-on and click example but no examples are for windows listeners

jQuery(document).ready(function(){
    //cache DOM elements
    var mainContent = $('.cd-main-content'),
        header = $('.cd-main-header'),
        sidebar = $('.cd-side-nav'),
        sidebarTrigger = $('.cd-nav-trigger'),
        topNavigation = $('.cd-top-nav'),
        searchForm = $('.cd-search'),
        accountInfo = $('.account');

    //on resize, move search and top nav position according to window width
    var resizing = false;
    moveNavigation();
    $(window).on('resize', function(){
        if( !resizing ) {
            (!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
            resizing = true;
        }
    });

    //on window scrolling - fix sidebar nav
    var scrolling = false;
    checkScrollbarPosition();
    $(window).on('scroll', function(){
        if( !scrolling ) {
            (!window.requestAnimationFrame) ? setTimeout(checkScrollbarPosition, 300) : window.requestAnimationFrame(checkScrollbarPosition);
            scrolling = true;
        }
    });

    //mobile only - open sidebar when user clicks the hamburger menu
    sidebarTrigger.on('click', function(event){
        event.preventDefault();
        $([sidebar, sidebarTrigger]).toggleClass('nav-is-visible');
    });

    //click on item and show submenu
    $('.has-children > a').on('click', function(event){
        var mq = checkMQ(),
            selectedItem = $(this);
        if( mq == 'mobile' || mq == 'tablet' ) {
            event.preventDefault();
            if( selectedItem.parent('li').hasClass('selected')) {
                selectedItem.parent('li').removeClass('selected');
            } else {
                sidebar.find('.has-children.selected').removeClass('selected');
                accountInfo.removeClass('selected');
                selectedItem.parent('li').addClass('selected');
            }
        }
    });

    //click on account and show submenu - desktop version only
    accountInfo.children('a').on('click', function(event){
        var mq = checkMQ(),
            selectedItem = $(this);
        if( mq == 'desktop') {
            event.preventDefault();
            accountInfo.toggleClass('selected');
            sidebar.find('.has-children.selected').removeClass('selected');
        }
    });

    $(document).on('click', function(event){
        if( !$(event.target).is('.has-children a') ) {
            sidebar.find('.has-children.selected').removeClass('selected');
            accountInfo.removeClass('selected');
        }
    });

    //on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
    sidebar.children('ul').menuAim({
        activate: function(row) {
            $(row).addClass('hover');
        },
        deactivate: function(row) {
            $(row).removeClass('hover');
        },
        exitMenu: function() {
            sidebar.find('.hover').removeClass('hover');
            return true;
        },
        submenuSelector: ".has-children",
    });

    function checkMQ() {
        //check if mobile or desktop device
        return window.getComputedStyle(document.querySelector('.cd-main-content'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
    }

    function moveNavigation(){
        var mq = checkMQ();

        if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) {
            detachElements();
            topNavigation.appendTo(sidebar);
            searchForm.removeClass('is-hidden').prependTo(sidebar);
        } else if ( ( mq == 'tablet' || mq == 'desktop') &&  topNavigation.parents('.cd-side-nav').length > 0 ) {
            detachElements();
            searchForm.insertAfter(header.find('.cd-logo'));
            topNavigation.appendTo(header.find('.cd-nav'));
        }
        checkSelected(mq);
        resizing = false;
    }

    function detachElements() {
        topNavigation.detach();
        searchForm.detach();
    }

    function checkSelected(mq) {
        //on desktop, remove selected class from items selected on mobile/tablet version
        if( mq == 'desktop' ) $('.has-children.selected').removeClass('selected');
    }

    function checkScrollbarPosition() {
        var mq = checkMQ();

        if( mq != 'mobile' ) {
            var sidebarHeight = sidebar.outerHeight(),
                windowHeight = $(window).height(),
                mainContentHeight = mainContent.outerHeight(),
                scrollTop = $(window).scrollTop();

            ( ( scrollTop + windowHeight > sidebarHeight ) && ( mainContentHeight - sidebarHeight != 0 ) ) ? sidebar.addClass('is-fixed').css('bottom', 0) : sidebar.removeClass('is-fixed').attr('style', '');
        }
        scrolling = false;
    }
});

推荐答案

您可以像这样在Vue中监听窗口事件:

You can listen for a window event in Vue like this:

methods: {
  onResize(event) {
    console.log('window has been resized', event) 
  }
},

mounted() {
  // Register an event listener when the Vue component is ready
  window.addEventListener('resize', this.onResize)
},

beforeDestroy() {
  // Unregister the event listener before destroying this Vue instance
  window.removeEventListener('resize', this.onResize)
}

这篇关于如何在vue.js中使用侦听器处理滚动和调整窗口大小等事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！