Реализация метода jquery в vue.js - PullRequest
Новая
       3

Реализация метода jquery в vue.js

0 голосов
/ 18 апреля 2019

Я строю отзывчивую строку меню в проекте vue.js.

У меня есть точный код метода в следующем коде

https://codepen.io/anon/pen/OGvXYY

здесь есть файл html + css + jquery.

Я реализовал тот же формат html, css, но когда дело доходит до файла js, который я не могу реализовать в vue.js, я немного борюсь с этим.

Я прилагаю свой код Vue, может помочь в работе JQuery в Vue.js

Я использовал mount для прослушивателя событий. Я только что сделал некоторые исправления в VUE, JS, но это не правильно. 

  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);
},

methods: {
  onResize(event) {
  console.log('window has been resized', event);
  function calcWidth() {
    var navwidth = 0;
    var morewidth = document.querySelectorAll('#main 
    .more').outerWidth(true);
    document.querySelectorAll('#main > li:not(.more)').each(function () {
      navwidth += document.querySelectorAll(this).outerWidth(true);
    });
    // var availablespace = $('nav').outerWidth(true) - morewidth;
    var availablespace = $('#nav-main').width() - morewidth;
    if (navwidth > availablespace) {
      var lastItem = document.querySelectorAll('#main > 
      li:not(.more)').last();
      lastItem.attr('data-width', lastItem.outerWidth(true));
      lastItem.prependTo(document.querySelectorAll('#main .more ul'));
      calcWidth();
    } else {
      var firstMoreElement = document.querySelectorAll('#main li.more 
        li').first();
      if (navwidth + firstMoreElement.data('width') < availablespace) {
        firstMoreElement.insertBefore(document.querySelectorAll('#main 
      .more'));
      }
    }
    if (document.querySelectorAll('.more li').length > 0) {
      document.querySelectorAll('.more').css('display', 'block');
    } else {
      document.querySelectorAll('.more').css('display', 'none');
    }
  }
},

}, 

  \\orginal js to be convereted to use in vue.js

   $(document).ready(function() {

function calcWidth() {
    var navwidth = 0;
    var morewidth = $('#main .more').outerWidth(true);
    $('#main > li:not(.more)').each(function() {
        navwidth += $(this).outerWidth( true );
    });

    //var availablespace = $('nav').outerWidth(true) - morewidth;
    var availablespace = $('#nav-main').width() - morewidth;

    if (navwidth > availablespace) {
        var lastItem = $('#main > li:not(.more)').last();
        lastItem.attr('data-width', lastItem.outerWidth(true));
        lastItem.prependTo($('#main .more ul'));
        calcWidth();
    } else {

    var firstMoreElement = $('#main li.more li').first();
    if (navwidth + firstMoreElement.data('width') < availablespace) {
        firstMoreElement.insertBefore($('#main .more'));
    }
}

if ($('.more li').length > 0) {
    $('.more').css('display','block');
    } else {
        $('.more').css('display','none');
    }
}

$(window).on('resize load',function(){
    calcWidth();
});

});

1 Ответ

0 голосов
/ 18 апреля 2019

Вы можете использовать ту же реализацию JQuery внутри Vue.js, используя Компоненты Wrapper. Здесь является хорошим примером портирования существующего плагина Select2 Jquery в качестве компонента Vue Wrapper.

...