data(){return {
autoplay: true,
carouselIndex: 0,
bannerHeight: 740,} },
created() {
var width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
this.screenWidth = width
this.setSize()
},
mounted() {
this.setSize()
const that = this
window.addEventListener(
‘resize‘,
function() {
var width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
that.screenWidth = width
that.setSize()
},
false
)
},
watch: {
computedUI() {
const that = this
window.addEventListener(
‘resize‘,
function() {
var width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
that.screenWidth = width
that.setSize()
},
false
)
}
},
methods: {
setSize() {
let width = this.isCollapseUI
? this.screenWidth - 54
: this.screenWidth - 200
this.bannerHeight = (1200 / 3440) * width
},
carouselChange(index) {
this.carouselIndex = index
},
prev() {
this.$refs.carousel.prev()
},
next() {
this.$refs.carousel.next()
},
}
html 结构：
<div class="bottom"> <el-carousel :height="bannerHeight + ‘px‘" arrow="none" ref="carousel" id="banner" @change="carouselChange" :autoplay="autoplay" indicator-position="none" > <el-carousel-item class="carousel-item"> <img class="carousel-img" src="../../../assets/images/banners/timemgr.png" alt srcset /> </el-carousel-item> <el-carousel-item class="carousel-item"> <img class="carousel-img" src="../../../assets/images/banners/effecient.png" alt srcset /> </el-carousel-item> <el-carousel-item class="carousel-item"> <img class="carousel-img" src="../../../assets/images/banners/myattendance.png" alt srcset /> </el-carousel-item> <el-carousel-item class="carousel-item"> <img class="carousel-img" src="../../../assets/images/banners/apply.png" alt srcset /> </el-carousel-item> </el-carousel> <div id="btn" class="btn" :style="{‘top‘:this.bannerHeight/2+‘px‘}"> <div class="prev" @click="prev">上一步</div> <div class="next" @click="next">下一步</div> </div> </div>
css样式：
.bottom { position: relative; background: #f7fbff; height: calc(100vh - 260px); /deep/ .el-carousel { overflow: hidden; } .btn { width: 240px; height: 40px; position: absolute; right: 15%; top: 40%; z-index: 99; div { width: 110px; height: 40px; background: rgba(3, 120, 245, 1); border-radius: 20px; line-height: 40px; text-align: center; cursor: pointer; color: #fff; z-index: 100; } .prev { position: absolute; left: 0; } .next { position: absolute; left: 130px; } } /deep/ .el-carousel__container { position: relative; } /deep/ .el-carousel__arrow { display: none; } } .carousel-item { width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; } .carousel-img { width: 100%; }
效果图：
实现效果点：
1. 窗口拖动实现图片不行变；
2. 宽高自适应整个屏幕 ，减去左边的侧边导航
原文：https://www.cnblogs.com/zmdblog/p/10367571.html