在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 發(fā)現(xiàn)iview 輪播組件一個(gè)很奇怪的問(wèn)題,在輪播的時(shí)候,會(huì)交替出現(xiàn) 寫在輪播中的

發(fā)現(xiàn)iview 輪播組件一個(gè)很奇怪的問(wèn)題,在輪播的時(shí)候,會(huì)交替出現(xiàn) 寫在輪播中的@click事件無(wú)法執(zhí)行

<template>
    <div class="boxdiv">
      <Carousel v-model="value1" loop>
        <CarouselItem class="car">
            <div class="demo-carousel">
              <div class="test" @click="abc">1</div>
            </div>
        </CarouselItem>
        <CarouselItem>
            <div class="demo-carousel">2</div>
        </CarouselItem>
    </Carousel>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value1: 0
            }
        },
        methods:{
          abc(){
            console.log(11111);
          }
        }
    }
</script>
<style lang="less">
.boxdiv {
  height: 600px;
  .demo-carousel {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .test {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      background-color: red;
    }
  }
}
</style>

這是復(fù)制自Carousel 走馬燈 iview的輪播組件,我在其中一個(gè)CarouselItem 中添加了一個(gè)div 并且綁定了@click事件,每次輪播到這個(gè)CarouselItem 的時(shí)候,點(diǎn)擊里面的div上的click事件,會(huì)出現(xiàn)交替無(wú)法點(diǎn)擊的情況
希望有大佬試試這個(gè)現(xiàn)象,我不確定是我寫法上的問(wèn)題,還是組件自身的問(wèn)題

回答
編輯回答
別傷我

我也重現(xiàn)了你的問(wèn)題,我找到原因了。
iview的這個(gè)輪播圖,實(shí)例化的時(shí)候,會(huì)生成兩個(gè)div,且一模一樣的。

clipboard.png
然鵝,你綁定的點(diǎn)擊事件只在第一個(gè)div里面的某個(gè)節(jié)點(diǎn)上,而在另外一個(gè)div的那個(gè)節(jié)點(diǎn)上并沒(méi)有綁定,所以說(shuō)又一次點(diǎn)擊是生效的,另外一次就不會(huì)生效


我試了下,你把loop屬性去掉就可以了,你試試看。

<Carousel v-model="value1" loop @on-change="change"></Carousel>

這里這個(gè)loop去掉


clipboard.png
看到源碼這里,作者是直接復(fù)制的innerHTML這樣做是復(fù)制不了對(duì)應(yīng)節(jié)點(diǎn)綁定的事件的,所以這個(gè)應(yīng)該是iview自身的bug。建議題主不要用iview的這個(gè)輪播圖了,推薦用vue-awesome-swiper。

2018年4月1日 02:03