1.実装のアイデア：回転ランタンにはautoplay、カルーセルを自動的に切り替えるかどうかを決定する属性があります。値はブール値で、デフォルトはtrueです。明らかに、内部コンポーネントをクリックすると、この属性の値をfalseに変更できますカルーセルを停止し、非回転ライトコンポーネントをクリックしたときに、その値をtrueに変更します。
2.実現プロセス：
- コンポーネントに
autoplayプロパティを追加し、値を自動再生変数に割り当てます。 - Vueのデータで変数を宣言します。デフォルト値はtrue（自動回転）です。
- カルーセルのコンテナに
click.stopメソッドを追加し、stopAutoクリックしてカルーセルを停止します（バブリングイベントを防ぐために注意）。 - このページのVueコンテナーに
clickメソッドを追加し、startAutoクリックしてローテーションを開始します。 - Vue.jsのメソッドに追加します
3.完全なコード：
<div id="app" @click="startAuto">
<!-- 这里是你的其它标签 -->
<!-- 这里是你的其它标签 -->
<div @click.stop="stopAuto">
<template>
<el-carousel :interval="4000" type="card" arrow="never" :autoplay="autoplay" ref="carousel" >
<el-carousel-item v-for="item in carouseData" :key="item.id" :id="item.id">
<img alt="" :src="item.url">
</el-carousel-item>
</el-carousel>
</template>
</div>
<!-- 这里是你的其它标签 -->
<!-- 这里是你的其它标签 -->
</div>
var vm = new Vue({
el:"#app",
data(){
return:{
autoplay: true,
}
},
methods:function(){
startAuto:function(){
if(this.autoplay == false){
this.autoplay = true;
}
},
stopAuto:function(){
if(this.autoplay == true){
this.autoplay = false;
}
},
}
})