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

Question

我找到了一个 codepen.io 示例 (https://codepen.io/srees/pen/pgVLbm) 我想在我正在开发的 .vue 应用程序的上下文中使用，我需要一些帮助来传输 <script> 部分结束。

我将 HTML 块复制到 <template> 中，将 CSS 复制到 <style> 中。我已经确认 .vue 文件在更广泛的上下文中工作（当 <script> 被注释掉时内容加载。我还在我的 <script> 之前放置 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> 来解决 $ 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(){

    });
});    
   }
}

和运行挂载方法如下：

mounted() {
   this.renderStuff();
}

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

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

How to copy a codepen.io example into a .vue

vue.js

bootstrap-4

codepen