vue 关于props 父组件传值

最新推荐文章于 2024-01-25 23:04:37 发布

转载最新推荐文章于 2024-01-25 23:04:37 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whyue/p/7419355.html

文章标签：

#javascript #json #ViewUI

本文介绍了一个基于Vue.js的轮播图组件实现方案。该组件支持自动播放、鼠标悬停暂停、索引导航等功能，并提供了自定义配置选项。通过使用此组件，可以轻松地在网站上添加交互式的图片轮播效果。

swiper.vue 子组件

info.vue 父组件

swiper.vue
<template>
    <div class="swiper-wrap" @mouseover="autoPlayStop" @mouseout="autoPlayStart(0)">
        <p>
        	<img  :src="sildeArr[nowIndex]" >       
        </p>
        <p class="sli-page">
        	<span @click="goto(prev)"><</span>
        	<span v-for="(item,index) in sildeArr" :style="{'color': nowIndex == index ? active : unActive}" @click="goto(index)">{{index+1}}</span>
        	<span @click="goto(next)">></span>
        </p>
    </div>
</template>
<script>

export default({
	name:'swiper',
	props:{
		unActive:{//索引默认颜色
			type:String,
			default: '#f5f5f5',
		},
		active:{//索引选中颜色
			default: '#ccc',
		},
		autoPlaytime:{
			type:Number,
			default:3000
		}

	},
	data(){
		return {
			nowIndex:0,
			autoPlaytype:true
		}
	},
	computed:{
		prev(){
			if(this.nowIndex==0){
				return this.sildeArr.length-1
			}else{
				return this.nowIndex-1
			}
			// nowIndex--;
		},
		next(){
			if(this.nowIndex==this.sildeArr.length-1){
				return 0
			}else{
				return this.nowIndex+1
			}
		}
	},
	methods:{
		goto(index){
			this.nowIndex=index
		},
		autoPlayStop(){
			let _this=this;
			clearInterval(_this.autoPlaytype)
		},
		autoPlayStart(i){
			let _this=this;
			_this.autoPlaytype=setInterval(()=>{
				_this.goto(_this.next)
			},_this.autoPlaytime)
			
		}
	},
	mounted(){
		this.autoPlayStart();
	}
})
</script>	

info.vue

<template>
　　<div>
　　　　<swiper :sildeArr="img" :autoPlaytime="time" unActive="#888" active="#fff" ></swiper>
　　</div>
</template>
<script type="text/javascript">
import swiper from './swiper'
import dataImg from '../data/aboutme';
export default({
　　name:'header',
　　data(){
　　　　return{
　　　　　　img:[],
　　　　　　time:2000
　　}
},
created (){
　　this.$router.push('/heade/info');
　　this.$router.push('info');
　　this.$http.get('http://img.cn').then((data)=>{
　　　　let dataImg=JSON.parse(data.bodyText);
　　　　this.img=dataImg.img
　　});
},
components: {swiper}
})
</script>