Заставьте работать должным образом metisMenu в приложении vue - PullRequest
Новая
       18

Заставьте работать должным образом metisMenu в приложении vue

1 голос
/ 23 июня 2019

Я хочу использовать шаблон SB Admin 2 из https://github.com/dpwilhelmsen/sb-admin-2-bootstrap-4

В моем приложении Laravel 5.7 / Vuejs 2.6 / Vuex 3.1 / Bootstrap 4.3, и я делаю для этого несколько шагов:

Как это основано на метисмену В консоли я запускаю следующие команды: 

npm install --save metismenu
npm i popper

npm audit fix

В ресурсах / js / app.js я включил metismenu: 

require('./bootstrap');


//require('popper');
/* If to uncomment line above in console I got lot of errors :
 WARNING in ./node_modules/popper/index.js 235:35-58
Critical dependency: the request of a dependency is an expression
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/sb2/app.scss ./resources/sass/sb2/sb-admin-2.scss
 */

require('metismenu');

require('jquery');

window.Vue = require('vue');
...

В ресурсах / js / helpers / commonFuncs.js, который используется на всех страницах vue, я запускаю меню при методе: 

export function checkAuthorization(store, router) {
    // console.log("-11 checkAuthorization::")


    router.beforeEach((to, from, next) => {
        jQueryInit();

        next();


    ...

    function jQueryInit() {
    // alert( "jQueryInit"+(-55) )

    $(function () {
        // alert( "INSIDE::"+var_dump(-11) )
        $('#side-menu').metisMenu();
        console.log("Inside $('#side-menu')::")
        console.log($('#side-menu'))

    });

//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
    $(function () {
        var setupPage = function () {
            var topOffset = 50;

            console.log("++1 typeof window::")
            console.log(typeof window)
            console.log(window)

            var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
            if (width < 768) {
                $('div.navbar-collapse').removeClass('show');
                topOffset = 100; // 2-row-menu
            } else {
                $('div.navbar-collapse').addClass('show');
            }

            console.log("++2 typeof window::")
            console.log(typeof window)
            console.log(window)
            var height = ((window.innerHeight > 0) ? window.innerHeight : screen.height) - 1;
            height = height - topOffset;
            if (height < 1) height = 1;
            if (height > topOffset) {
                $("#page-wrapper").css("min-height", (height) + "px");
            }

        };
        // debugger


        $(window).bind("load resize", setupPage);

        var url = window.location;
        var element = $('ul.nav a').filter(function () {
            return this.href == url;
        }).addClass('active').parent();

        while (true) {
            if (element.is('li')) {
                element = element.parent().addClass('in').parent();
            } else {
                break;
            }
        }

        setupPage();
    });
    alert( "AFTER jQueryInit"+(-55) )
}

глядя на консоль Я не вижу никаких ошибок JS и похоже, что окно является правильным объектом JS.

Полагаю, это лучшее место для инициации метисмену.

Я не прикреплял никакие файлы metisMenu.js / css вручную, выполняя эту команду как выше 

require('metismenu');

сделал это.

Но макет моей страницы нарушен. Вы можете посмотреть его в прямом эфире на http://hostels -tours.nilov-sergey-demo-apps.tk / admin / dashboard Обратите внимание на вывод консоли: https://imgur.com/a/xZ0EVNg

Я добавил определение стиля: 

#wrapper {
  width: 100%;
  background-color: yellow;
  border: 2px dotted red;
}

, чтобы убедиться, что применяются стили в ресурсах / sass / sb2 / sb-admin-2.scss. Что не так и можно ли работать в приложении vue metisMenu.js?

Спасибо!

...