我试着用Vue JS做一个滑块
我设法增加了背景和底部子弹的工作。但是幻灯片锚(prev和next)函数没有触发@click。
仅锚定的HTML。链接到完整html
<div class="left-anchor w-8 h-8 text-white" @click="sliderCount(-1)">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
</svg>
</div>
<div class="right-anchor w-8 h-8 text-white" @click="sliderCount(1)" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
</svg>
</div>
脚本
export default {
data:function(){
return{
interval:"",
currentSlide:0,
images:['alexandr.jpg','pixabay.jpg','tim-mossholder.jpg'],
image:''
}
},
methods:{
sliderCount:function(count){
this.currentSlide = (this.currentSlide >= 2) ? 0 : this.currentSlide + count
},
setCurrentSlide:function(count) {
this.currentSlide = count - 1
}
},
mounted(){
},
beforeMount(){
this.interval = ''
}
}
为什么这个@click函数不能工作?
发布于 2021-01-23 11:31:08
我看到了您的代码,发现问题不在Vue JS中。但这只是一个基本的CSS问题的z-索引。只需在样式标记中使用此代码即可。
.anchors{
z-index: 2;
}
发布于 2021-01-23 11:46:07
@FakeAccount是正确的,但是由于您使用的是顺风,所以应该在不定义额外样式规则的情况下添加z-10
类:
<div class="anchors z-10 ...">
https://stackoverflow.com/questions/65858362
复制相似问题