效果:
子组件定义
HTML
<template>
<div
v-show="ready"
class="el-carousel__item"
:class="{
'is-active': active,
'el-carousel__item--card': $parent.type === 'card',
'is-in-stage': inStage,
specialIndex: specialIndex,
'is-hover': hover,
'is-animating': animating,
}"
@click="handleItemClick"
:style="itemStyle"
>
<div
v-if="$parent.type === 'card'"
v-show="!active"
class="el-carousel__mask"
></div>
<slot></slot>
</div>
</template>
JS
<script>
import { autoprefixer } from 'element-ui/src/utils/util'
const CARD_SCALE = 0.83
export default {
name: 'ElCarouselItem',
props: {
name: String,
label: {
type: [String, Number],
default: ''
}
},
data () {
return {
hover: false,
translate: 0,
scale: 1,
active: false,
ready: false,
inStage: false,
specialIndex: false,
animating: false
}
},
created () {
this.$parent && this.$parent.updateItems()
},
destroyed () {
this.$parent && this.$parent.updateItems()
},
methods: {
processIndex (index, activeIndex) {
// console.log('activeIndex', activeIndex, index)
// console.log('index', index)
if (activeIndex == 0) {
return index == 1 ? 1 : index == 2 ? 2 : index == 3 ? -2 : index == 4 ? -1 : 0
}
if (activeIndex == 1) {
return index == 2 ? 1 : index == 3 ? 2 : index == 4 ? -2 : index == 0 ? -1 : 0
}
if (activeIndex == 2) {
return index == 3 ? 1 : index == 4 ? 2 : index == 0 ? -2 : index == 1 ? -1 : 0
}
if (activeIndex == 3) {
return index == 4 ? 1 : index == 0 ? 2 : index == 1 ? -2 : index == 2 ? -1 : 0
}
if (activeIndex == 4) {
return index == 0 ? 1 : index == 1 ? 2 : index == 2 ? -2 : index == 3 ? -1 : 0
}
},
calcCardTranslate (index) {
return index * 180 + 320
},
calcTranslate (index, activeIndex, isVertical) {
const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth']
return distance * (index - activeIndex)
},
translateItem (index, activeIndex, oldIndex) {
const parentType = this.$parent.type
const parentDirection = this.parentDirection
const length = this.$parent.items.length
if (parentType !== 'card' && oldIndex !== undefined) {
this.animating = index === activeIndex || index === oldIndex
}
index = this.processIndex(index, activeIndex, length)
if (parentType === 'card') {
if (parentDirection === 'vertical') {
console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode')
}
this.inStage = Math.round(Math.abs(index)) <= 1
this.specialIndex = Math.round(Math.abs(index)) >= 3
this.active = index === 0
this.translate = this.calcCardTranslate(index, activeIndex)
this.scale = Math.abs(index) == 0 ? 1 : Math.abs(index) == 1 ? 0.9 : Math.abs(index) == 2 ? 0.76 : 0.62
} else {
this.active = index === activeIndex
const isVertical = parentDirection === 'vertical'
this.translate = this.calcTranslate(index, activeIndex, isVertical)
}
this.ready = true
},
handleItemClick () {
const parent = this.$parent
if (parent && parent.type === 'card') {
const index = parent.items.indexOf(this)
parent.setActiveItem(index)
}
}
},
computed: {
parentDirection () {
return this.$parent.direction
},
itemStyle () {
const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX'
const value = `${translateType}(${this.translate}px) scale(${this.scale})`
// console.log('转换类型', translateType)
// console.log('偏移', this.translate)
// console.log('大小', this.scale)
const style = {
transform: value
}
return autoprefixer(style)
}
}
}
</script>
CSS
<style scoped>
.el-carousel__arrow--left {
left: -14px !important;
}
.el-carousel__arrow--right {
right: -18px !important;
}
.el-carousel__item {
cursor: pointer;
z-index: 1;
}
.el-carousel__item--card.is-in-stage {
z-index: 2;
}
.el-carousel__item--card.is-active {
z-index: 3;
}
.specialIndex {
z-index: 0;
}
</style>
父组件中使用
HTML
<template>
<div class="a0013-container">
<div class="a0013-con bgcolor">
<div class="a0013-tit">
<img src="./default/tit.png" alt="" />
</div>
<div class="a0013-swiper">
<el-carousel
:interval="3000"
type="card"
height="320px"
style="overflow-x: unset"
>
<Swiper v-for="(item, i) in dataList" :key="i">
<div class="imgBox">
<img class="imgItem" :src="item.photo.thumb" alt="" srcset="" />
<div class="imgTit">{{ item.title }}</div>
</div>
</Swiper>
</el-carousel>
</div>
</div>
</div>
</template>
JS
<script>
import { postCms } from "@/utils/http"
import Swiper from "./component/swiper.vue"
export default {
name: "A0013", // 轮播图(5个)
components: {
Swiper
},
data () {
return {
dataList: [], // 专题数据列表
}
},
created () {
this.getData()
},
methods: {
getData () {
try {
var params = {
cardgroups: "Page1660637775865179",
paging: { page_size: 1000, page_no: 1, last_id: "" },
}
postCms("/mobileinf/rest/cctv/cardgroups", params)
.then((res) => {
res.cardgroups.forEach((item) => {
if (item.style == 2022) {
this.dataList = item.cards
}
})
}).catch(err => console.log(err))
} catch (err) {
console.log(err)
}
}
}
}
</script>
CSS
<style lang="less" scoped>
/deep/.el-carousel__arrow--left {
left: -14px !important;
}
/deep/.el-carousel__arrow--right {
right: -16px !important;
}
.a0013-container {
width: 100%;
.a0013-con {
margin: 0 auto;
width: 1200px;
padding-bottom: 50px;
.a0013-tit {
width: 240px;
margin-bottom: 30px;
img {
width: 240px;
}
}
.a0013-swiper {
width: 1200px;
height: 100%;
.el-carousel__item {
width: 560px;
padding: 10px;
background-color: #f1f6fe;
box-sizing: border-box;
}
.imgBox {
position: relative;
.imgItem {
width: 540px;
text-align: center;
height: 300px;
background-size: cover;
}
.imgTit {
position: absolute;
top: calc(50% - 36px);
left: calc(50% - 138px);
width: 276px;
height: 72px;
background: rgba(251, 251, 251, 0.55);
border: 1px solid #fbfbfb;
box-shadow: 0px 3px 28px 0px rgba(120, 129, 150, 0.3);
border-radius: 5px;
font-size: 43px;
font-family: zihun100hao;
font-weight: 600;
color: #283147;
line-height: 72px;
}
}
}
}
}
</style>
因为elemengt-ui没有修改一次显示多个的属性, 找了好久找到一篇修改为一次显示6张的文章,且只有子组件没有父组件使用的代码。在此基础上进行修改进行使用，在此记录下来，方便以后使用。有兴趣的可以去原文章研究下。
参考文章：VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张）_Mickey_于浩的博客-CSDN博客_elementui走马灯卡片显示多个
本文转载自: https://blog.csdn.net/weixin_58860430/article/details/126781582
版权归原作者 唱一首情歌 所有， 如有侵权，请联系我们删除。
版权归原作者 唱一首情歌 所有， 如有侵权，请联系我们删除。