div部分

CSS部分

.bannerImg{

width: 100%;

height: inherit;

min-height: 600px;

min-width: 1400px;

}

vue.JS部分

var vm = new Vue({

el : '#apptwo',

data : {

bannerHeight:"",

BannerImg:[

"${request.contextPath}/statics/BCHimg/b6.png",

"${request.contextPath}/statics/BCHimg/b6.png"

],

mounted(){

this.setSize();

const that = this;

window.addEventListener('resize', function() {

that.screenWidth = $(window).width();

that.setSize();

}, false);

},

methods : {

setSize: function () {

console.log(this.bannerHeight)

this.bannerHeight = 740 / 2560 * this.screenWidth

if(this.bannerHeight > 740) this.bannerHeight = 740

if(this.bannerHeight < 600) this.bannerHeight = 600

},

總結

以上是生活随笔為你收集整理的element走马灯自动_详细element-ui的走马灯carousel轻松实现自适应全屏banner详细过程...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。