如何将codepen.io示例复制到.vue中

Question

我发现了一个codepen.io示例（https://codepen.io/srees/pen/pgVLbm）我想在我正在处理的.vue应用程序的上下文中玩，我需要一些帮助转移<script>部分。

我将HTML块复制到<template>中，将CSS复制到<style>中。我已经确认.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;
...

Answer 1

你可以定义这样的方法：

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

旁注，var在这个时代并不理想。建议将这些转换为let。