jquery – 如何在vue.js中使用侦听器来处理滚动和窗口大小调整等事件

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

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

vue网站上的事件监听器文档仅声明了v-on和click示例,但没有关于Windows监听器的示例

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',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 navigat@R_675_9473@o 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;
    }
});