问题描述
我对 Vuejs 比较陌生。我正在开发一个 vuejs（前端）和 Laravel（后端）项目。 我想在我的项目中集成一个名为 turn.js 的 Jquery 库。但我正面临错误。因为，我已经能够在 vue Mounted() 钩子中运行 jquery，但是 yepnope js 不起作用。 如何在我的 vuejs laravel 项目中动态使用 turn.js 开源库。我的 vue js 代码在这里
<script>
export default {
data:() => {
return {
}
},mounted() {
function loadApp() {
$('#canvas').fadeIn(1000);
var flipbook = $('.magazine');
// Check if the CSS was already loaded
if (flipbook.width()==0 || flipbook.height()==0) {
setTimeout(loadApp,10);
return;
}
// Create the flipbook
flipbook.turn({
// Magazine width
width: 922,// Magazine height
height: 600,// Duration in millisecond
duration: 1000,// Hardware acceleration
acceleration: !isChrome(),// Enables gradients
gradients: true,// Auto center this flipbook
autoCenter: true,// Elevation from the edge of the flipbook when turning a page
elevation: 50,// The number of pages
pages: 12,// Events
when: {
turning: function(event,page,view) {
var book = $(this),currentPage = book.turn('page'),pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
$('.thumbnails .page-'+currentPage).
parent().
removeClass('current');
$('.thumbnails .page-'+page).
parent().
addClass('current');
},turned: function(event,view) {
disableControls(page);
$(this).turn('center');
if (page==1) {
$(this).turn('peel','br');
}
},missing: function (event,pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i],$(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),max: function() {
return largeMagazineWidth()/$('.magazine').width();
},when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next');
},swipeRight: function() {
$(this).zoom('flipbook').turn('prevIoUs');
},// zoom page zoomin and page zoomout workflow
// resize: function(event,scale,pageElement) {
// if (scale==1)
// loadSmallPage(page,pageElement);
// else
// loadLargePage(page,pageElement);
// },// zoom page zoomin and page zoomout workflow
zoomIn: function () {
$('.thumbnails').hide();
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />',{'class': 'exit-message'}).
html('<div>Press ESC to exit</div>').
appendTo($('body')).
delay(2000).
animate({opacity:0},500,function() {
$(this).remove();
});
}
},zoomOut: function() {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function(){
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
},0);
}
}
});
// Zoom event
if ($.isTouch)
$('.magazine-viewport').bind('zoom.doubleTap',zoomTo);
else
$('.magazine-viewport').bind('zoom.tap',zoomTo);
// Using arrow keys to turn the page
$(document).keydown(function(e){
var prevIoUs = 37,next = 39,esc = 27;
switch (e.keyCode) {
case prevIoUs:
// left arrow
$('.magazine').turn('prevIoUs');
e.preventDefault();
break;
case next:
//right arrow
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
//regular expression ^page = page should be at the beginning of string
// ([0-9]*) means the 0-9 should be 0 or more times in the matching string
// $ is used to search characters at the end of the string
Hash.on('^page\/([0-9]*)$',{
yep: function(path,parts) {
var page = parts[1];
if (page!==undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page',page);
}
},nop: function(path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page',1);
}
});
$(window).resize(function() {
resizeViewport();
}).bind('orientationchange',function() {
resizeViewport();
});
// Events for thumbnails
$('.thumbnails').click(function(event) {
var page;
if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
$('.magazine').turn('page',page[1]);
}
});
$('.thumbnails li').
bind($.mouseEvents.over,function() {
$(this).addClass('thumb-hover');
}).bind($.mouseEvents.out,function() {
$(this).removeClass('thumb-hover');
});
if ($.isTouch) {
$('.thumbnails').
addClass('thumbanils-touch').
bind($.mouseEvents.move,function(event) {
event.preventDefault();
});
} else {
$('.thumbnails ul').mouSEOver(function() {
$('.thumbnails').addClass('thumbnails-hover');
}).mousedown(function() {
return false;
}).mouSEOut(function() {
$('.thumbnails').removeClass('thumbnails-hover');
});
}
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart',regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.next-button').bind($.mouseEvents.over,function() {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out,function() {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down,function() {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up,function() {
$(this).removeClass('next-button-down');
}).click(function() {
$('.magazine').turn('next');
});
// Events for the next button
$('.prevIoUs-button').bind($.mouseEvents.over,function() {
$(this).addClass('prevIoUs-button-hover');
}).bind($.mouseEvents.out,function() {
$(this).removeClass('prevIoUs-button-hover');
}).bind($.mouseEvents.down,function() {
$(this).addClass('prevIoUs-button-down');
}).bind($.mouseEvents.up,function() {
$(this).removeClass('prevIoUs-button-down');
}).click(function() {
$('.magazine').turn('prevIoUs');
});
resizeViewport();
$('.magazine').addClass('animated');
};
// Zoom icon
$('.zoom-icon').bind('mouSEOver',function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouSEOut',function() {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click',function() {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,yep: ['../../../../public/js/lib/turn.js'],nope: ['../../../../public/js/lib/turn.html4.min.js'],both: ['../../../../public/js/lib/zoom.min.js','../../../../public/js/megazine/js/magazine.js','../../../../public/js/megazine/css/magazine.css'],complete: loadApp
});
function changePage(){
pageNo = $('#changePage-number').val();
// alert(pageNo);
var flipbook = $('.magazine');
flipbook.turn("page",pageNo);
}
},}
我面临的错误是
Error in mounted hook: "ReferenceError: yepnope is not defined"
我想在我的项目中使用 turnjs。我怎样才能实现我的目标。我见过 flipbook-vue 可以使用，但没有相关文档，我也没有'不知道这是否是开源。 提前感谢大家的时间。我真的需要你的建议。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）