版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CodingNoob/article/details/82822498
一转眼用vue已经半年多的时间了，刚开始用vue的时候是直接看文档边看边边开发的，虽然在项目过程中遇到一些小的问题，不过基本上都可以自己解决，用了了半年后突然发现自己慢慢喜欢上了MVVM框架，没有繁琐的dom操作，自己可以更专注于业务逻辑本身，最近也在看一本书，吴军的《文明之光》，主要讲人类和社会发展史的，个人觉得收获还是挺多的，对整个社会和人类的发展过程有了更为深刻的理解。感兴趣的可以看下！
好久都没有更新博客了。今天趁着下雨天更新一下博客，最近在做项目的过程中遇到一些公共的组件，需要抽离出来成为一个独立的组件，然后通过外部组件传参和传递方法的方式就可以直接调用。
主要要点父组件通过props和和子组件传参、$emit的使用具体可以看vue的官网
vueApi介绍
最终效果图：
父组件部分：
<template>
<div id="app">
<!--first></first-->
<banner
:list="list"
:looptime="looptime"
:width="width"
:height="height"
:background="background"
:color="color"
:fontSize="fontSize"
@prev="prev"
@next="next"
@change="changeBanner"
@click="bannerClick">
</banner>
<!--footer>Footer</footer-->
</div>
</template>
<script>
import banner from './pages/banner'
export default {
name: 'App',
data () {
return {
looptime: 4000, // 循环时间
width: 400,
height:200,
background: 'red',
color: '#fff',
fontSize: '70px',
list: [{
id: 1,
text: '1',
url: 'http1'
}, {
id: 2,
text: '2',
url: 'http2'
}, {
id: 3,
text: '3',
url: 'http3'
}, {
id: 4,
text: '4',
url: 'http4'
}]
}
},
created() {
},
methods: {
// 点击下一页回调
prev (index, list) {
console.log('我点击了上一页');
console.log(index);
console.table(list);
},
// 点击下一页回调
next () {
console.log('我点击了下一页');
console.log(index)
console.table(list);
},
// 鼠标移入状态点回调
changeBanner (index) {
console.log('我移入了鼠标状态点了');
console.log(index);
},
bannerClick (index, item) {
console.log('我点击了广告内容');
console.log(index);
console.table(item);
}
},
computed: {
},
components: {
banner
}
}
</script>
<style lang="less">
*{margin:0;padding:0;font-family:"微软雅黑";}
li{list-style:none;}
body{padding:100px 0;}
header,footer{
position:fixed;
height:100px;
width:100%;
background:blue;
font-size:30px;
color:#fff;
line-height:100px;
text-align:center;
}
footer{bottom:0;}
header{top:0;}
</style>
banner组件部分：
<template>
<div class="banner" :style="intStyle">
<div class="box">
<ul>
<li v-for="(item, index) in list" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">{{item.url}}</li>
</ul>
<div class="status">
<span v-for="(item, index) in list" :class="index === current ? 'active' : ''"
@mouseenter="changeBanner(index)"
@mouseleave="startLoop"
>{{index + 1}}
</span>
</div>
<div class="btn">
<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop"><</span>
<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">></span>
</div>
</div>
<!--h1 @click="getArticle">{{msg}}</h1-->
</div>
</template>
<script>
export default {
name: 'banner',
data() {
return {
current: 0, // 当前索引
timerId: null, // 清除循环标记
intStyle: {}
}
},
props: [
'list',
'looptime',
'height',
'width',
'background',
'color',
'fontSize'
],
methods: {
getArticle () {
this.$emit('getArticle', this.article)
},
// 鼠标移入状态圆点
changeBanner (index) {
this.$emit('change', this.current);
this.stopLoop();
this.current = index;
},
// 鼠标点击banner内容
bannerClick (index, item) {
this.$emit('click', index, item);
},
// 点击上一张按钮
prev () {
if(this.current > 0) {
// 将对象列表对应的索引和整个对象传出去
this.$emit('prev', this.current, this.list);
this.current--;
} else {
this.$emit('prev', this.current, this.list);
this.current = 3;
}
},
// 点击下一张按钮
next () {
if(this.current < 3) {
this.$emit('prev', this.current, this.list);
this.current ++;
} else {
this.$emit('prev', this.current, this.list);
this.current = 0;
}
},
// 鼠标移出继续循环播放
startLoop () {
this.int(4000);
},
// 鼠标移入停止循环播放
stopLoop () {
clearTimeout(this.timerId); // 清除循环
},
// 初始化加载
int (time){
this.timerId = setInterval(()=> {
this.next();
}, time);
// 初始化样式
this.intStyle = {
width: this.width + 'px',
height: this.height + 'px',
background: this.background,
color: this.color
}
}
},
created () {
this.int(4000);
}
}
</script>
<style lang="less" scoped>
.banner{
width:400px;
height:200px;
overflow:hidden;
.box{
position:relative;
height:100%;
ul{
height:100%;
li{
position:absolute;
left:0;
width:100%;
height:100%;
font-size:inherit;
color:#fff;
font-size:80px;
text-align:center;
background:Red;
opacity:0;
transition: all 1.5s;
}
.active{
opacity:1;
transition: all 1.5s;
}
}
.status{
position:absolute;
bottom:0;
width:100%;
height:40px;
text-align:Center;
span{
display:inline-block;
height:20px;
width:20px;
margin:0 5px;
background:#ccc;
border-radius:10px;
color:#333;
cursor:pointer;
}
span.active{
color:#fff;
background:blue;
}
}
}
.btn{
position:absolute;
top:50%;
width:100%;
transform: translateY(-50%);
span{
display:block;
height:40px;
width:20px;
color:#fff;
line-height:40px;
text-align:Center;
background:rgba(0,0,0, .7);
cursor:pointer;
}
span.prev{
float:left;
}
span.next{
float:right;
}
}
}
</style>
一转眼做开发两年多了，越学越觉得自己还有很多不足，路还很长，一直在努力着。。。