Ⅰ、Element-ui 提供的組件與想要目標(biāo)情況的對比：
1、Element-ui 提供組件情況：
其一、Element-ui 自提供的代碼情況為(示例的代碼，例子如下)：
// Element-ui 自提供的代碼：
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.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(2n+1) {
background-color: #d3dce6;
}
</style>
代碼地址：https://element.eleme.cn/#/zh-CN/component/carousel
其二、頁面的顯示情況為：
Ⅱ、實現(xiàn) Carousel 走馬燈樣式變化的過程：
1、 Carousel 自提供的代碼的實踐：
其一、代碼為：
<template>
<div>
<div style="font-weight:bolder; font-size:20px">走馬燈的使用:</div>
<div>
<div style="margin:20px 0;">方法一：原本樣式</div>
<div class="block" style="width:50%;">
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in arrayList" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arrayList:['王二','張三','李四','麻五']
}
}
}
</script>
<style lang="scss" scoped>
.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(2n+1) {
background-color: #d3dce6;
}
// 此時是：設(shè)置 carousel 走馬燈的高度為：100px;
/deep/.el-carousel__container {
height: 100px;
}
}
</style>
其二、頁面展示為：
2、 Carousel 代碼相關(guān)屬性的使用：
其一、indicator-position(指示器) 屬性的使用：
A、代碼：
indicator-position="none" //此時的指示器就不顯示了；
indicator-position="outside" //表示指示器在外面顯示；
// 而默認(rèn)不設(shè)置的指示器是在里面的；
B、狀態(tài)顯示：
//顯示器不顯示的情況:
//顯示器在內(nèi)部的情況：
//顯示器在外部的情況：
其二、arrow(箭頭) 屬性的使用：
A、代碼：
arrow="always" //此時是：箭頭一直顯示；
arrow="never" //此時是：箭頭不再顯示；
// 默認(rèn)是 hover 時箭頭才顯示(即：不設(shè)置 arrow 屬性時)
B、狀態(tài)顯示：
//箭頭一直顯示的情況:
//箭頭不顯示的情況:
//箭頭 hover 時顯示的情況(即：此時僅 hover 時才顯示箭頭):
其三、direction(方向) 屬性的使用：
A、代碼：
direction="vertical" //此時表示：讓走馬燈在垂直方向上顯示；
//而默認(rèn)是：走馬燈在水平方向上顯示；
B、狀態(tài)顯示：
// 走馬燈在水平方向上顯示為：
// 走馬燈在垂直方向上顯示為：
其四、autoplay(是否自動播放) 屬性的使用：
:autoplay="false" //此時表示是：非自動播放；
//而默認(rèn)是：自動播放；
3、 Carousel 代碼相關(guān)樣式修改的過程：
其一、走馬燈高度設(shè)置：
/deep/.el-carousel__container {
height: 60px;
}
其二、設(shè)置 item 背景色：
/deep/.el-carousel {
.el-carousel__item {
background-color: #ccc; //設(shè)置每一個 item 待切換頁面的背景色;
margin-top: 0px;
}
}
其三、調(diào)整箭頭大?。?/strong>
/deep/.el-carousel__arrow{
font-size: 20px;
}
其四、調(diào)整箭頭的位置：
/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 代碼相關(guān)樣式修改的整體代碼為：
其一、代碼為：
<template>
<div>
<div>
<div style="margin:20px 0;">方式二：修改后的樣式</div><!-- 可以通過該 div 調(diào)整走馬燈的位置; -->
<div class="project" style="width:80%;margin-top:20px;"><!-- 通過外層的 project 類來調(diào)整走馬燈的位置; -->
<el-carousel :interval="5000" arrow="none" indicator-position="none" style="margin-top:20px;">
<!-- 也可以通過 el-carousel 的設(shè)置 style 屬性來調(diào)整走馬燈的位置; -->
<el-carousel-item v-for="item in arrayList" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arrayList:['王二','張三','李四','麻五']
}
}
}
</script>
<style lang="scss" scoped>
.project {
//下面代碼：此時是調(diào)整 arrayList 值的大小和位置；
.el-carousel__item h3 {
line-height: 60px; //此時是調(diào)整 arrayList 的值上下位置;
text-align: center; //此時是使 arrayList 的值居中;
font-size: 18px;
opacity: 0.75;
}
//下面代碼：此時是調(diào)整走馬燈的高度，但設(shè)置不了盒子上面的距離(暫時沒找到合適的 css 位置)；
/deep/.el-carousel__container {
height: 60px;
}
/deep/.el-carousel {
.el-carousel__item {
background-color: #ccc; //設(shè)置每一個 item 待切換頁面的背景色;
margin-top: 0px;
}
}
//下面代碼：此時是調(diào)整箭頭的大小;
/deep/.el-carousel__arrow{
font-size: 20px;
}
//下面代碼：此時是調(diào)整箭頭的位置;
/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>
其二、頁面顯示為：
Ⅲ、實現(xiàn) Carousel 走馬燈樣式的整體代碼與顯示結(jié)果：
1、整體代碼為：
<template>
<div>
<div style="font-weight:bolder; font-size:20px">走馬燈的使用:</div>
<div>
<div style="margin:20px 0;">方法一：原本樣式</div>
<div class="block" style="width:50%;">
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in arrayList" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
<div>
<div style="margin:20px 0;">方式二：修改后的樣式</div><!-- 可以通過該 div 調(diào)整走馬燈的位置; -->
<div class="project" style="width:80%;margin-top:20px;"><!-- 通過外層的 project 類來調(diào)整走馬燈的位置; -->
<el-carousel :interval="5000" arrow="none" indicator-position="none" style="margin-top:20px;">
<!-- 也可以通過 el-carousel 的設(shè)置 style 屬性來調(diào)整走馬燈的位置; -->
<el-carousel-item v-for="item in arrayList" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arrayList:['王二','張三','李四','麻五']
}
}
}
</script>
<style lang="scss" scoped>
.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(2n+1) {
background-color: #d3dce6;
}
/deep/.el-carousel__container {
height: 100px;
}
}
.project {
//備用代碼： 可能需要的 hover 狀態(tài);
// &: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;
// }
// }
//下面代碼：此時是調(diào)整 arrayList 值的大小和位置；
.el-carousel__item h3 {
line-height: 60px; //此時是調(diào)整 arrayList 的值上下位置;
text-align: center; //此時是使 arrayList 的值居中;
font-size: 18px;
opacity: 0.75;
}
//下面代碼：此時是調(diào)整走馬燈的高度，但設(shè)置不了盒子上面的距離(暫時沒找到合適的 css 位置)；
/deep/.el-carousel__container {
height: 60px;
}
/deep/.el-carousel {
.el-carousel__item {
background-color: #ccc; //設(shè)置每一個 item 待切換頁面的背景色;
margin-top: 0px;
}
}
//下面代碼：此時是調(diào)整箭頭的大小;
/deep/.el-carousel__arrow{
font-size: 20px;
}
//下面代碼：此時是調(diào)整箭頭的位置;
/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>
2、顯示結(jié)果為：
文章來源：http://www.zghlxwxcb.cn/news/detail-822374.html
Ⅳ、小結(jié)：
其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關(guān)注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章來源地址http://www.zghlxwxcb.cn/news/detail-822374.html
到了這里，關(guān)于(Carousel)解決：Element-ui 中 Carousel 走馬燈的樣式的修改問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
