效果

想要达到的效果如下图，顶部横幅有6张图片可以自动切换：

实现步骤

先去element-ui官网学习这个跑马灯的模板代码:

<template><el-carousel :interval="4000" type="card" height="200px"><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文件设计我们自己的走马灯组件：

<template><el-carousel :interval="4000" type="card" height="100px"><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;line-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中返回组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713100520717.png
然后就可以在login的视图层html中直接用这个组件：
效果;

element-ui+vue给登录界面创建一个走马灯幻灯片切换相关推荐

nodejs+vue实现登录界面功能（一）
项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面. 技术选型:nodejs+vue+stylus 界面效果: 切换登录方式手 ...
vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
vue 数据库登录界面_Vue学习之路之登录注册
杭州数澜科技招聘Node.js工程师[可实习].UE/UI设计师[实习].前端React工程师[实习],联系方式可见评论区 Vue.js + Element UI + MongoDB P1 安装Vue ...
.net vue漂亮登录界面_6个宝藏级Vue管理后台框架必须收藏
10月5号00:45尤小右在微博公布尚处于pre-alpha状态的Vue 3源码,主要的架构改进.优化和新功能均已完成,剩下的便是Vue 2现有功能的移植了-- 一经发布网友纷纷表示"扶我起 ...
.net vue漂亮登录界面_基于 electron-vue 开发的音乐播放器「实践」
作者:XiaoTuGou 转发链接:https://github.com/SmallRuralDog 前言基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐. 技术栈electron ...
快速上手vue的登录界面(最新版)
文章目录一.创建vue项目二.引入依赖三.改造下项目四.写入Login视图总结这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二 ...
实践 | Element UI + Vue 管理系统首页
大致效果图其中上方文头部导航,左边为菜单选项,中间为index页面. 进行组件化新建目录如下,新建文件如下其中分为两个文件夹,一个为views文件夹,一个为components文件夹,一个存放相 ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
Vue学习笔记：创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...

element-ui+vue给登录界面创建一个走马灯幻灯片切换

效果

实现步骤

element-ui+vue给登录界面创建一个走马灯幻灯片切换相关推荐

最新文章

热门文章