1.在vue專案中引入element ui

http://element.eleme.io/#/zh-CN/component/carousel

引入後，HTML部分

<el-carousel height="150px">
<el-carousel-item v-for="item in imgList" :key="item" height="300px" >
<h3><img :src="item" alt="解決Vue的專案使用Element ui 走馬燈無法實現的問題"> </h3>
</el-carousel-item>
</el-carousel>

JS部分

<script>
export default {
data(){
return {
imgList:[
require('../../assets/img/images/a1.png'),require('../../assets/img/images/a2.png'),require('../../assets/img/images/a3.png'),require('../../assets/img/images/a4.png'),require('../../assets/img/images/a5.png')
]
}
},components: {
}
}
</script>

用webpack搭建的專案不能直接使用絕對路徑，要用require，如果不使用這個，必須是線上圖片。http型別的

補充知識：基於vue 使用element UI框架 實現走馬燈 圖片高度自適應

走馬燈程式碼結構走一遍 （imgList陣列在data中宣告,此為本地資料）

data() {
 return{
 // 圖片需要引入,否則無法顯示
 imgList: [
   {id: 0,idView: require('../assets/images/banner3.jpg')},{id: 1,name: '詳情',idView: require('../assets/images/banner2.jpg')},{id: 2,name: '推薦',idView: require('../assets/images/banner1.jpg')}
  ]
 }
}

<template> 
 <el-carousel :interval="5000" arrow="always" class="d_jump" :height="imgHeight">
 <el-carousel-item v-for="item in imgList" :key="item.id">
  <el-row>
  <el-col :span="24"><img ref="imgHeight" :src="item.idView" class="banner_img"/></el-col>
  </el-row>
 </el-carousel-item>
 </el-carousel>
</template>

element UI 官網地址戳這裡

http://element-cn.eleme.io/#/zh-CN/component/carousel

Carousel 中有一個height引數 如果給固定值620px，那麼它會出現如圖效果， 圖片的寬高隨可視視窗的改變等比放大或縮小，可視視窗縮小，圖片的寬度和高度縮小， 輪播圖的固定高度不變,so...如圖所示 如果圖片給height: 100%; 屬性,圖片會拉伸；好吧，那就換一個auto，則如圖所示

所以，要想圖片正常顯示，又不會出現空白條的辦法，就是動態改變輪播圖的高度跟圖片高度相等即可。

首先獲取圖片的高度，通過ref來獲取DOM元素

監聽視窗發生改變時，獲取img的高度，給輪播圖height屬性新增屬性值

that.imgHeight = '620px'
window.onresize = function temp() {
 // 通過點語法獲取img的height屬性值
 that.imgHeight = `${that.$refs.imgHeight['0'].height}px`
}

以上這篇解決Vue的專案使用Element ui 走馬燈無法實現的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。