Ⅰ、Element-ui提供的组件与想要目标情况的对比1、Element-ui提供组件情况其一、Element-ui自提供的代码情况为(示例的代码例子如下)// Element-ui 自提供的代码templateel-carousel:interval5000arrowalwaysel-carousel-item v-foritem in 4:keyitemh3{{item}}/h3/el-carousel-item/el-carousel/templatestyle.el-carousel__item h3{color:#475669;font-size:18px;opacity:0.75;line-height:300px;margin:0;}.el-carousel__item:nth-child(2n){background-color:#99a9bf;}.el-carousel__item:nth-child(2n1){background-color:#d3dce6;}/style代码地址https://element.eleme.cn/#/zh-CN/component/carousel其二、页面的显示情况为Ⅱ、实现 Carousel 走马灯样式变化的过程1、Carousel自提供的代码的实践其一、代码为templatedivdiv stylefont-weight:bolder; font-size:20px走马灯的使用:/divdivdiv stylemargin:20px 0;方法一原本样式/divdivclassblockstylewidth:50%;el-carousel:interval5000arrowalwaysel-carousel-item v-foritem in arrayList:keyitemh3{{item}}/h3/el-carousel-item/el-carousel/div/div/div/templatescriptexportdefault{data(){return{arrayList:[王二,张三,李四,麻五]}}}/scriptstyle langscssscoped.block{.el-carousel__item h3{color:#475669;font-size:18px;opacity:0.75;line-height:100px;margin:0;}.el-carousel__item:nth-child(2n){background-color:#99a9bf;}.el-carousel__item:nth-child(2n1){background-color:#d3dce6;}// 此时是设置 carousel 走马灯的高度为100px;/deep/.el-carousel__container{height:100px;}}/style其二、页面展示为2、Carousel代码相关属性的使用其一、indicator-position(指示器)属性的使用A、代码indicator-positionnone//此时的指示器就不显示了indicator-positionoutside//表示指示器在外面显示// 而默认不设置的指示器是在里面的B、状态显示//显示器不显示的情况://显示器在内部的情况//显示器在外部的情况其二、arrow(箭头)属性的使用A、代码arrowalways//此时是箭头一直显示arrownever//此时是箭头不再显示// 默认是 hover 时箭头才显示(即不设置 arrow 属性时)B、状态显示//箭头一直显示的情况://箭头不显示的情况://箭头 hover 时显示的情况(即此时仅 hover 时才显示箭头):其三、direction(方向)属性的使用A、代码directionvertical//此时表示让走马灯在垂直方向上显示//而默认是走马灯在水平方向上显示B、状态显示// 走马灯在水平方向上显示为// 走马灯在垂直方向上显示为其四、autoplay(是否自动播放)属性的使用:autoplayfalse//此时表示是非自动播放//而默认是自动播放3、Carousel代码相关样式修改的过程其一、走马灯高度设置/deep/.el-carousel__container{height:60px;}其二、设置 item 背景色/deep/.el-carousel{.el-carousel__item{background-color:#ccc;//设置每一个 item 待切换页面的背景色;margin-top:0px;}}其三、调整箭头大小/deep/.el-carousel__arrow{font-size:20px;}其四、调整箭头的位置/deep/.el-carousel__arrow--left,/deep/.el-carousel__arrow--right{background-color:transparent!important;// 此时是将其外面的圆框变成透明(即彻底消失);position:relative;top:7px;}/deep/.el-carousel__arrow--left{left:20px;}/deep/.el-carousel__arrow--right{left:80px;}3、Carousel代码相关样式修改的整体代码为其一、代码为templatedivdivdiv stylemargin:20px 0;方式二修改后的样式/div!--可以通过该 div 调整走马灯的位置;--divclassprojectstylewidth:80%;margin-top:20px;!--通过外层的 project 类来调整走马灯的位置;--el-carousel:interval5000arrownoneindicator-positionnonestylemargin-top:20px;!--也可以通过 el-carousel 的设置 style 属性来调整走马灯的位置;--el-carousel-item v-foritem in arrayList:keyitemh3{{item}}/h3/el-carousel-item/el-carousel/div/div/div/templatescriptexportdefault{data(){return{arrayList:[王二,张三,李四,麻五]}}}/scriptstyle langscssscoped.project{//下面代码此时是调整 arrayList 值的大小和位置.el-carousel__item h3{line-height:60px;//此时是调整 arrayList 的值上下位置;text-align:center;//此时是使 arrayList 的值居中;font-size:18px;opacity:0.75;}//下面代码此时是调整走马灯的高度但设置不了盒子上面的距离(暂时没找到合适的 css 位置)/deep/.el-carousel__container{height:60px;}/deep/.el-carousel{.el-carousel__item{background-color:#ccc;//设置每一个 item 待切换页面的背景色;margin-top:0px;}}//下面代码此时是调整箭头的大小;/deep/.el-carousel__arrow{font-size:20px;}//下面代码此时是调整箭头的位置;/deep/.el-carousel__arrow--left,/deep/.el-carousel__arrow--right{background-color:transparent!important;// 此时是将其外面的圆框变成透明(即彻底消失);position:relative;top:7px;}/deep/.el-carousel__arrow--left{left:20px;}/deep/.el-carousel__arrow--right{left:80px;}}/style其二、页面显示为Ⅲ、实现 Carousel 走马灯样式的整体代码与显示结果1、整体代码为templatedivdiv stylefont-weight:bolder; font-size:20px走马灯的使用:/divdivdiv stylemargin:20px 0;方法一原本样式/divdivclassblockstylewidth:50%;el-carousel:interval5000arrowalwaysel-carousel-item v-foritem in arrayList:keyitemh3{{item}}/h3/el-carousel-item/el-carousel/div/divdivdiv stylemargin:20px 0;方式二修改后的样式/div!--可以通过该 div 调整走马灯的位置;--divclassprojectstylewidth:80%;margin-top:20px;!--通过外层的 project 类来调整走马灯的位置;--el-carousel:interval5000arrownoneindicator-positionnonestylemargin-top:20px;!--也可以通过 el-carousel 的设置 style 属性来调整走马灯的位置;--el-carousel-item v-foritem in arrayList:keyitemh3{{item}}/h3/el-carousel-item/el-carousel/div/div/div/templatescriptexportdefault{data(){return{arrayList:[王二,张三,李四,麻五]}}}/scriptstyle langscssscoped.block{.el-carousel__item h3{color:#475669;font-size:18px;opacity:0.75;line-height:100px;margin:0;}.el-carousel__item:nth-child(2n){background-color:#99a9bf;}.el-carousel__item:nth-child(2n1){background-color:#d3dce6;}/deep/.el-carousel__container{height:100px;}}.project{//备用代码 可能需要的 hover 状态;// :hover {// /deep/.el-carousel__arrow--left,// /deep/.el-carousel__arrow--right{// background-color: transparent !important;// position: relative;// top: 7px;// }// /deep/.el-carousel__arrow--left {// left: -67px;// }// /deep/.el-carousel__arrow--right {// right: -67px;// }// }//下面代码此时是调整 arrayList 值的大小和位置.el-carousel__item h3{line-height:60px;//此时是调整 arrayList 的值上下位置;text-align:center;//此时是使 arrayList 的值居中;font-size:18px;opacity:0.75;}//下面代码此时是调整走马灯的高度但设置不了盒子上面的距离(暂时没找到合适的 css 位置)/deep/.el-carousel__container{height:60px;}/deep/.el-carousel{.el-carousel__item{background-color:#ccc;//设置每一个 item 待切换页面的背景色;margin-top:0px;}}//下面代码此时是调整箭头的大小;/deep/.el-carousel__arrow{font-size:20px;}//下面代码此时是调整箭头的位置;/deep/.el-carousel__arrow--left,/deep/.el-carousel__arrow--right{background-color:transparent!important;// 此时是将其外面的圆框变成透明(即彻底消失);position:relative;top:7px;}/deep/.el-carousel__arrow--left{left:20px;}/deep/.el-carousel__arrow--right{left:80px;}}/style2、显示结果为Ⅳ、小结其一、哪里有不对或不合适的地方还请大佬们多多指点和交流其二、有兴趣的话可以多多关注这个专栏(Vue(Vue2Vue3)面试必备专栏)https://blog.csdn.net/weixin_43405300/category_11525646.html?spm1001.2014.3001.5482