vue+mousemove移入事件只触发一次怎么设置？

上面的代码中，我们在组件的 beforeMount 钩子函数中使用 addEventListener 方法给元素绑定了一次性事件监听器。通过传入 { once: true } 参数，可以让事件监听器只被触发一次。

需要注意的是，beforeMount 钩子函数只会在组件第一次渲染时调用一次，所以绑定的事件监听器也只会在组件第一次渲染时被触发一次。

如果需要多次触发，可以在mounted钩子函数中绑定事件。

  <div class="swiper">

    <el-row :gutter="10" class="row-col">

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="col-info">

        /* 添加 移入移出的事件 */

        <swiper

          :options="swiperOptionInfo"

          ref="mySwipers"

          class="info-swiper"

          @mouseenter.native="mouseEnter"

          @mouseleave.native="mouseLeave"

        >

          <swiper-slide

            v-for="item in datas"

            :key="item.id"

            class="swiper-item"

          >

            <img :src="item.img" alt="" class="img" />

          </swiper-slide>

          <!-- <div slot="pagination" class="swiper-pagination"></div>-->

          <div

            slot="button-prev"

            class="swiper-button-prev hidden-sm-and-down"

          ></div>

          <div

            slot="button-next"

            class="swiper-button-next hidden-sm-and-down"

          ></div>

        </swiper>

      </el-col>

    </el-row>

  </div>

</template>

export default {

  name: "Swipers",

  components: {},

  props: ["datas"],

  data() {

    return {

      swiperOptionInfo: {

        loop: true,

        autoplay: {

          delay: 6000,

          stopOnLastSlide: false,

          disableOnInteraction: true,

        },

        // pagination: {

        //    el: '.swiper-pagination',

        //    clickable: true,

        // },

        navigation: {

          nextEl: ".swiper-button-next",

          prevEl: ".swiper-button-prev",

        },

      },

    }

  },

  methods: {

    mouseEnter() {

      this.$refs.mySwipers.$swiper.autoplay.stop()

    },

    mouseLeave() {

      this.$refs.mySwipers.$swiper.autoplay.start()

    },

  },

}

.swiper {

  margin-top: 100px

  .row-col {

    max-height: 650px

    .col-info {

      height: 100%

      .info-swiper {

        height: 100%

        .swiper-item {

          width: 100%

          max-height: 550px

        //  cursor: pointer

          .img {

            width: 100%

            height: 100%

          }

        }

      }

    }

  }

}