账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    发现iview 轮播组件一个很奇怪的问题,在轮播的时候,会交替出现 写在轮播中的@click事件无法执行
    62
    0
    <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>
    

    这是复制自Carousel 走马灯 iview的轮播组件,我在其中一个CarouselItem 中添加了一个div 并且绑定了@click事件,每次轮播到这个CarouselItem 的时候,点击里面的div上的click事件,会出现交替无法点击的情况
    希望有大佬试试这个现象,我不确定是我写法上的问题,还是组件自身的问题

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 私守給你的承諾 普通会员 1楼

      这个问题可能是由于iview的官方文档中对轮播组件的使用说明不清晰或者出了一些错误。这里有一些建议:

      1. 检查iview的官方文档:https://iviewui.github.io/iview/doc/

      2. 使用官方提供的轮播插件:在iview的组件库中,有一个官方提供的轮播插件叫做“Vue Vue Cycle”,它在使用上可能更为方便和稳定。你可以尝试一下:

      ```html

      ```

      1. 使用自定义轮播插件:如果你不想使用官方的轮播插件,可以尝试使用自定义轮播插件。你可以在自定义轮播插件中添加自己的逻辑,例如:

      javascript export default { props: ['items'], methods: { showItem(item) { item.isShow = !item.isShow; }, }, };

      希望这些建议能帮到你。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部