本文介绍了vue引入偷窃者插件,分享给大家,希望对大家有帮助
<强>步骤一:强安装vue,,,
美元npm安装vue
<强>步骤二:强创建vue项目,,
#全局安装vue-cli
npm安装- g vue-cli美元
$ cd我的项目
美元npm安装
美元npm运行开发
之前
上面这些就是安装好vue项目,最主要的就是下面的步骤
<强>步骤三:下载好偷窃者相关的js和css, js放在静态目录下,css放在资产目录下只
<强>步骤四:,
安装运行时:
终端命令:npm安装babel-runtime
<强>步骤五:,
修改.eslintrc.js文件如下:,
//http://eslint.org/docs/user-guide/configuring
模块。出口={
根:没错,
解析:“babel-eslint”,
parserOptions: {
sourceType:“模块”
}，
env: {
浏览器:没错,
}，//https://github.com/feross/standard/blob/master/RULES.md javascript-standard-style
延伸:“标准”,//需要线头*。vue文件
插件:[
“html”
),//这里添加您的自定义规则
“规则”:{//允许paren-less箭头功能
“arrow-parens”: 0,//允许async-await
“generator-star-spacing”: 0,//允许调试器在开发过程中
“调试器”:process.env。NODE_ENV===? # 63;2:0
}，
“全局”:{
“偷窃者”:真的
}//这个地方是新加入的全局注入
}
之前
<强>步骤六:在自己的vue文件中添加轮播图代码,
& lt; div v: mouseenter=" stopPlay ()“v: mouseleave=?)”类=皊wiper-container gallery-top swiper-container-horizontal”比;
& lt; div类=皊wiper-wrapper”比;
& lt; div)=凹壑祃bt”类=皊wiper-slide swiper-slide-next”v-bind:祝辞& lt;/div>
& lt;/div>
& lt; div class=" swiper-button-next swiper-button-white”祝辞& lt;/div>
& lt; div class=" swiper-button-prev swiper-button-white swiper-button-disabled”祝辞& lt;/div>
& lt;/div>
& lt; div class=" swiper-container gallery-thumbs swiper-container-horizontal”比;
& lt; div类=皊wiper-wrapper”比;
& lt; div)=凹壑祃bt”类=皊wiper-slide swiper-slide-next”v-bind:祝辞& lt;/div>
& lt;/div>
& lt;/div>
之前
从“. ./. ./静态/进口偷窃者swiper-3.4.2.min.js”
让galleryTop
让galleryThumbs
出口默认{
名称:“主要”,
数据(){
返回{
lbt:(
{
“一”:“. ./静态/产品/lbt1.jpg”
},{
“一”:“. ./静态/产品/lbt2.jpg”
},{
“一”:“. ./静态/产品/lbt3.jpg”
}
]
}
}，
安装(){
this.lunbo ()
}，
方法:{
lunbo () {
galleryTop=new偷窃者(”。gallery-top’, {
nextButton:“.swiper-button-next”,
prevButton:“.swiper-button-prev”,
spaceBetween: 10,
grabCursor:没错,
initialSlide: 1、
autoplayDisableOnInteraction:假
}）
galleryThumbs=new偷窃者(”。gallery-thumbs’, {
spaceBetween: 10,
播放:4000
initialSlide: 1、
centeredSlides:没错,
slidesPerView:“汽车”,
touchRatio: 0.2,
slideToClickedSlide:没错,
autoplayDisableOnInteraction:假的,
grabCursor:真
}）
galleryTop.params。控制=galleryThumbs
galleryThumbs.params。控制=galleryTop
}，
stopPlay () {
galleryTop.stopAutoplay ()
galleryThumbs.stopAutoplay ()
}，
玩(){
galleryTop.startAutoplay ()
galleryThumbs.startAutoplay ()
}
}
}
之前
@ import url(“. ./资产/swiper-3.4.2.min.css”);
.gallery-top {
高度:32眼动;
宽度:100%;
}
.gallery-thumbs {
高度:20%;
box-sizing: border-box;
填充:10 px 0;
背景:rgba (0, 0, 0, 0.4);
光标:指针;
}
.gallery-thumbs .swiper-slide {
宽度:30%;
身高:6眼动;
透明度:0.3;
}
.gallery-thumbs .swiper-slide-active {
透明度:1;
}
.swiper-slide {
background-size: 100% - 160%;
-webkit-background-size: 100% - 160%;
}
之前
这里还有一个很重要的问题,在模板里面设置背景图,写法应该是
