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>之前，以解决{{1} }错误。我需要将某些内容导入App.vue或特定的.vue文件吗？当我不评论$ not defined时，我只是加载了一个空白页。

<script>

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。

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

1 个答案: