溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue的項目使用Element ui走馬燈無法實現(xiàn)怎么辦

發(fā)布時間：2020-08-03 13:42:18 來源：億速云 閱讀：500 作者：小豬 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了Vue的項目使用Element ui走馬燈無法實現(xiàn)怎么辦，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

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" >
<h4><img :src="item" alt=""> </h4>
</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類型的

補(bǔ)充知識：基于vue 使用element UI框架 實現(xiàn)走馬燈 圖片高度自適應(yīng)

走馬燈代碼結(jié)構(gòu)走一遍 （imgList數(shù)組在data中聲明,此為本地數(shù)據(jù)）

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 官網(wǎng)地址戳這里

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

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

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

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

監(jiān)聽窗口發(fā)生改變時，獲取img的高度，給輪播圖height屬性添加屬性值

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

以上就是關(guān)于Vue的項目使用Element ui走馬燈無法實現(xiàn)怎么辦的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手