element-ui+vue给登录界⾯创建⼀个⾛马灯幻灯⽚切换效果
想要达到的效果如下图，顶部横幅有6张图⽚可以⾃动切换：
实现步骤
先去学习这个跑马灯的模板代码:
<el-carousel-item v-for="item in 6":key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3{
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n){
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1){
background-color: #d3dce6;
}
</style>
根据这个模板，创建我们⾃⼰的⾛马灯组件，新建pmd.Vue⽂件设计我们⾃⼰的⾛马灯组件：
<el-carousel-item v-for="item in imagebox":key="item.id">
<img :src="item.idView"class="image">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default{
name:'pmd',
data(){
return{
imagebox:[{id:0, idView:require('../../assets/img/band1.png')},
{id:1, idView:require('../../assets/img/band2.png')},
{id:2, idView:require('../../assets/img/band3.png')},
{id:3, idView:require('../../assets/img/band4.png')},
{id:4, idView:require('../../assets/img/band5.png')},
{id:5, idView:require('../../assets/img/band6.png')}
/
/ imagebox是assets下⼀个放图⽚的⽂件夹
]
}
}
}
</script>
<style>
.el-carousel__item h3{
color: #475669;
font-size: 14px;
opacity: 0.75;
vue element adminline-height: 200px;
margin: 20px 1px 1px 1px;
}
.el-carousel__item:nth-child(2n){
background-color: #99a9bf;
margin: 5px 1px 1px 1px;
}
.el-carousel__item:nth-child(2n+1){
background-color: #d3dce6;
margin: 5px 1px 1px 1px;
}
.
image{
/*设置图⽚宽度和浏览器宽度⼀致*/
width:100%;
height:inherit;
}
</style>
原理很简单，组件中的数据存放图⽚集 imagebox，imagebox是assets下⼀个放图⽚的⽂件夹，遍历这个组件集显⽰即可。这⾥值得注意的是⾛马灯图⽚的⼤⼩宽⾼⽐例最好与组件中的⽐例⼀致。也就是说，你可以把要显⽰的图⽚裁剪⼀下，不需要与你要显⽰的宽⾼保持⼀致，只要宽⾼⽐⼀致即可，然后设置图⽚显⽰格式.image{
/设置图⽚宽度和浏览器宽度⼀致/
width:100%;
height:inherit;
}
这样显⽰的效果就⽐较好。我当时做的时候先⽤QQ的截图功能量了⼀下这个图⽚的⼤⼩（宽和⾼的像素值长度，qq截图时会显⽰的）：
然后裁剪图⽚的时候先剪出⼀样⼤⼩的⼀个框，然后斜⾓拉伸，等⽐例缩放。
组件设置好了后，就可以去调⽤了。
我想要把这个跑马灯组件⽤到我的登录界⾯login.Vue，因此在login. vue的JS中导⼊这个pmd.vue：import中添加组件位置
export中返回组件
发表评论