Как скопировать пример codepen.io в .vue - PullRequest
Новая
       35

Как скопировать пример codepen.io в .vue

1 голос
/ 16 апреля 2019

Я нашел пример codepen.io (https://codepen.io/srees/pen/pgVLbm). Я хочу поэкспериментировать с приложением .vue, над которым я работаю, и мне нужна помощь в переносе раздела <script>.

Я скопировал фрагмент HTML в <template>, а CSS - в * 1007. * Я подтвердил, что файл .vue работает в более широком контексте (контент загружается, когда <script> закомментирован.Я также поместил <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> непосредственно перед моим <script>, чтобы устранить полученную ошибку $ not defined. Есть ли что-то, что мне нужно импортировать в App.vue или в этот конкретный файл .vue? Когда я оставляю <script> без комментариев,Я просто загружаю пустую страницу. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script>
var hidWidth;
var scrollBarWidths = 40;
...

1 Ответ

1 голос
/ 16 апреля 2019

вы можете определить метод, подобный этому: 

methods: {
     renderStuff: function () {
       var hidWidth;
       var scrollBarWidths = 40;

       var widthOfList = function(){
       var itemsWidth = 0;
       $('.list li').each(function(){
       var itemWidth = $(this).outerWidth();
       itemsWidth+=itemWidth;
    });
  return itemsWidth;
};

  var widthOfHidden = function(){
    return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())- 
    scrollBarWidths;
   };

var getLeftPosi = function(){
  return $('.list').position().left;
};

var reAdjust = function(){
  if (($('.wrapper').outerWidth()) < widthOfList()) {
    $('.scroller-right').show();
  }
  else {
    $('.scroller-right').hide();
  }

  if (getLeftPosi()<0) {
    $('.scroller-left').show();
  }
  else {
    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
    $('.scroller-left').hide();
  }
}

reAdjust();

$(window).on('resize',function(e){  
    reAdjust();
});

$('.scroller-right').click(function() {

  $('.scroller-left').fadeIn('slow');
  $('.scroller-right').fadeOut('slow');

  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

  });
});

$('.scroller-left').click(function() {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){

    });
});    
   }
}

и запустите метод на mount следующим образом: 

mounted() {
   this.renderStuff();
}

Примечание: вар не идеален в наши дни. Рекомендую преобразовать их в let.

...