vue 무봉 윤방 효과 실현(러닝 램프)
1. 먼저 두 개의 vue 구성 요소 Sweiper를 만듭니다.vue 및 SweiperItem.vue;
2. 두 구성 요소를 페이지로 가져옵니다. Sweiper.vue에서 v-model 전참(v-model은 사실 문법 설탕, 기본 속성value와 기본 이벤트 input)을 사용합니다.
코드에서 저는 v-model의selcted를 통해 Sweiper (하위 구성 요소) 에게 값을 전달합니다. 자동 윤방 시 하위 구성 요소가 input 이벤트를 터치하여 표시할 값을 부모 구성 요소로 되돌려줍니다.
3. 핵심은 selected의 값을 Sweiper Item에 전달하고 Sweiper Item의 name 값과 동일하게 어떤 그림을 표시해야 하는지입니다.
<template>
<div>
<Sweiper v-model="selected">
<!--v-model , value input -->
<Sweiper-item name="item1">
<div class="item">
<img :src="getImg('01')" alt="">
</div>
</Sweiper-item>
<Sweiper-item name="item2">
<div class="item">
<img :src="getImg('02')" alt="">
</div>
</Sweiper-item>
<Sweiper-item name="item3">
<div class="item">
<img :src="getImg('03')" alt="">
</div>
</Sweiper-item>
</Sweiper>
</div>
</template>
v-for ,
<script>
import Sweiper from "../components/Sweiper.vue";
import SweiperItem from "../components/SweiperItem.vue";
export default {
name: "mySweiper",
components: {
Sweiper,
SweiperItem
},
data() {
return {
selected: "item1",//
}
},
methods:{
getImg(url){
return "img/"+url+".jpg"
},
},
mounted(){
/*setInterval(()=>{
this.selected="item2"
},3000)
mounted , , Sweiper watch
}*/ Sweiper
}
</script>
<style >
.item{
/*border: 1px solid black;*/
}
.item>img{
width: 100%;
/*height: 0.1rem;*/
}
</style>
Sweiper.vue
<template>
<div class="Sweiper">
<slot></slot>
</div>
</template>
<script>
export default {
name: "Sweiper",
data() {
return{
current:''
}
},
props:{
value:{
type:String,
default:""
},
},
mounted(){
// name indexOf
this.names=this.$children.map(child=>{
return child.name
});
this. showImg();
this. paly()
},
methods:{
showImg(){
this.current=this.value||this.$children[0].name;
//
this.$children.map(vm=>{
vm.selected=this.current
})
},
paly(){
//
this.timer=setInterval(()=>{
//indexOf
const index=this.names.indexOf(this.current);
let newIndex=index+1;
//
if (newIndex===this.names.length){
newIndex=0;
}
this.$emit("input",this.names[newIndex])
},3000)
}
},
watch:{
// value , selected
value(){
this. showImg()
}
},
beforeDestroy() {
//
clearInterval(this.timer)
}
};
</script>
<style>
.Sweiper{
/*border: 1px solid black;*/
width: 100%;
height: 4rem;
overflow: hidden;
margin: 0 auto;
position: relative;
}
</style>
SweiperItem.vue
<template>
<transition>
<div class="Sweiper-item" v-show="isShow">
<slot></slot>
</div>
</transition>
</template>
<script>
export default {
name:"SweiperItem",
data(){
return{
selected:""
}
},
props:{
name:{
type:String,
required:true
},
},
mounted(){
},
computed:{
isShow(){
return this.selected===this.name;
}
}
};
</script>
<style>
.v-enter-active,.v-leave-active{
transition: all 1s linear;
}
.v-leave-to{
transform:translate(-100%);
}
.v-enter{
transform: translate(100%);
}
.v-enter-active{
position: absolute;
top:0;
left: 0;
}
</style>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.