共计 2517 个字符,预计需要花费 7 分钟才能阅读完成。
商城我的项目应用 nuxt 架构
应用轮播图,抉择了时下最热门的 vue-awesome-swiper 作为根底组件。然而应用过程中遇到的坑,真的很好受
nuxt 的版本是 2.14.6
在 vuecli 中构建应用 vue-awesome-swiper 组件没有任何问题,
然而加上 ssr 就始终会报错,原生组件的切换上一个下一个的按钮不显示,即使是显示了点击也不会失效,前面排查也不晓得是不是电脑硬件的问题,咱们应用要求切换按钮须要自定义(包含按钮行为)
这儿间接上咱们目前的组件代码
<template> | |
<div v-swiper:mySwiper="sweiperConfig.options" :style="{width: `${sweiperConfig.width}px`, height: `${sweiperConfig.height}px` }"> | |
<div class="swiper-wrapper"> | |
<slot name="swiperbody"></slot> | |
</div> | |
<a-icon | |
v-if="iconConfig.prevShow" | |
class="swiper-left-btn" | |
:style="{...iconConfig.iconCss}" | |
type="left" | |
:disabled="iconConfig.prevDisabled" | |
@click="prev" | |
/> | |
<a-icon | |
v-if="iconConfig.nextShow" | |
class="swiper-right-btn" | |
:style="{...iconConfig.iconCss}" | |
type="right" | |
:disabled="iconConfig.nextDisabled" | |
@click="next" | |
/> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
// sweiper 配置,options 是 sweiper 官网配置,具体请查看官网文档 | |
sweiperConfig: { | |
type: Object, | |
default: () => { | |
return { | |
options: { | |
type: Object, | |
default: () => {} | |
}, | |
width: { | |
type: Number, | |
default: 300 | |
}, | |
height: { | |
type: Number, | |
default: 300 | |
} | |
} | |
} | |
}, | |
// icon 配置,这是配置自定义的图标的款式 | |
iconConfig: { | |
type: Object, | |
default: () => { | |
return { | |
prevShow: { | |
type: Boolean, | |
default: true | |
}, | |
nextShow: { | |
type: Boolean, | |
default: true | |
}, | |
prevDisabled: { | |
type: Boolean, | |
default: false | |
}, | |
nextDisabled: { | |
type: Boolean, | |
default: false | |
}, | |
iconCss: { | |
type: Object, | |
default: () => { | |
return { | |
'font-size': '30px', | |
padding: '10px', | |
top: '50%' | |
} | |
} | |
} | |
} | |
} | |
} | |
}, | |
mounted() { | |
// 回传 mySwiper 实例,不便父组件应用该实例进行操作(调用办法或者事件)// 在父组件中对应的 $emit 办法定义到 method 中就能间接获取该实例,具体应用参考下文代码块中 | |
this.$emit('getSwiperObj', this.mySwiper) | |
}, | |
methods: {prev() {this.mySwiper.slidePrev() // 内置办法,往上翻一页 | |
// 以后的页码 | |
this.$emit('prevClick', this.mySwiper.realIndex + 1) | |
}, | |
next() {this.mySwiper.slideNext() // 内置办法,往下翻一页 | |
// 以后的页码 | |
this.$emit('nextClick', this.mySwiper.realIndex + 1) | |
} | |
} | |
} | |
</script> | |
<style lang="scss" scoped> | |
@mixin swiper-btn { | |
background-color: #fff; | |
border-radius: 50%; | |
position: absolute; | |
z-index: 2; | |
} | |
.swiper-wrapper { | |
.swiper-slide { | |
&:hover {cursor: pointer;} | |
} | |
.img-wrapper img { | |
margin: auto; | |
width: 200px; | |
height: 100px; | |
background-image: linear-gradient(gray 100%, transparent 0); | |
} | |
} | |
.swiper-left-btn { | |
@include swiper-btn; | |
left: 5px; | |
} | |
.swiper-right-btn { | |
@include swiper-btn; | |
right: 5px; | |
} | |
.swiper-left-btn, | |
.swiper-right-btn { | |
&:hover {background-color: #ccc;} | |
} | |
</style> |
须要特地留神的是,<slot name="swiperbody"></slot>
,这里的 slot,在页面内应用要用 v -slot 的形式,这儿 v -slot 简写,不分明的去 vue 官网查看
class="sweiper-slide"
这个属性不能丢掉,这是 sweiper 源码获取子元素用的
<VueSwiper | |
:sweiper-config="sweiperConfig" | |
:icon-config="iconConfig" | |
@getSwiperObj="getSwiperObj" | |
@prevClick="prevClick" | |
@nextClick="nextClick" | |
> | |
<template #swiperbody> | |
<img v-for="(img, index) in imgs" :key="index" :src="img.url" class="swiper-slide" /> | |
</template> | |
</VueSwiper> |
参考文章:nuxt 应用 vue-awesome-sweiper 采坑
正文完
发表至: javascript
2021-01-30