Question

如果用户在移动设备上，我无法设置我的Vue组件以便以不同方式处理他们的方法。例如，导航下拉，如果用户点击链接，我想阻止他们前往该位置，而是下拉下拉列表。而在桌面上，我希望他们如果点击它就转到它，只在悬停时下拉。我的项目有很多其他方面需要这个。

我有一个主要的Vue实例：

var Main = new Vue({
    el: 'body',

    data: {
        mobile: true
    },

    ready: function() {
        if( document.clientWidth >= 992 )
        {
            this.mobile = false;
        }
    }
});

export default Main;

然后对于我的组件，我做这样的事情：

import Main from './../Main';

var NavLink = Vue.component('navlink', {
    template: '#nav-link-template',

    replace: true,

    data: function() {
        return {
        }
    },

    props: ['text', 'url'],

    ready: function() {
    },

    methods: {
        handleClick: function(e) {
            e.preventDefault();
            console.log(Main.mobile);

            if( Main.mobile )
            {
                if( this.$children.length )
                {
                    // Has dropdown
                    this.$children[0].dropDown();
                }
                else
                {
                    // No dropdown so redirect user
                    window.location = this.url;
                }
            }
            else
            {
                // Not mobile so let user go
                window.location = this.url;
            }
        }
    }
});

Main.mobile不仅无论什么分辨率都会返回默认值，因为它们的就绪方法似乎在Main ready方法之前运行..但这也感觉错误的设置。

感谢您的任何见解。

Answer 1

首先，根据您的代码，您不需要Main commonjs模块作为vuejs实例。将其设为简单的js对象

Main = {
    mobule: document.clientWidth >= 992
}

export default Main;

或者您可能希望动态处理客户端窗口大小

var Main = new Vue({
    created: function() {
        // dunno why v-on="resize: func" not working
        global.window.addEventListener('resize', function () {
            //calc width and heigh somehow
            self.$broadcast('resize', width, heigh);
        });
    }
});

export default Main;

根据移动设备的不同，在Vue中处理方法的方式不同

1 个答案: