vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）
更新時(shí)間：2019年09月05日 09:46:32 作者：克克業(yè)業(yè)
這篇文章主要介紹了vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.效果圖如下
2.vue代碼如下
<el-carousel type="card" arrow="always" :loop="false" :initial-index="1"
indicator-position="none" :autoplay="false">
<el-carousel-item v-for="(items, index) in item.userInfo1" :key="index">
<div class="div2">
<div>
<div style="position: absolute;" v-show="item.state===0 || item.state===1">
<img @click="deleteImg(items,item)" src="../../assets/delete.png"
class="deleteStyle">
</div>
<img :src="items.b_img.url" class="headImgStyle">
</div>
<div class="nickname">
{{items.b_nickname}}
</div>
</div>
</el-carousel-item>
</el-carousel>
3.修改的樣式
.el-carousel__item.el-carousel__item--card.is-in-stage {
text-align: center;
}
/*修改高度*/
.el-carousel__container {
height: 100px;
}
.van-collapse-item__content {
padding: 14px 0;
}
/*左右箭頭的樣式*/
button.el-carousel__arrow.el-carousel__arrow--left, button.el-carousel__arrow.el-carousel__arrow--right {
font-size: 12px;
height: 20px;
width: 20px;
background: #A099F0;
}
總結(jié)
以上所述是小編給大家介紹的vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能（類似輪播圖效果）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue3中update:modelValue的使用與不生效問題解決
現(xiàn)在vue3的使用越來越普遍了,vue3這方面的學(xué)習(xí)我們要趕上,下面這篇文章主要給大家介紹了關(guān)于vue3中update:modelValue的使用與不生效問題的解決方法,需要的朋友可以參考下2022-03-03
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊組件等，感興趣的小伙伴請和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
在Vue中，組件是構(gòu)建用戶界面的基本單位，封裝公共組件是一種良好的實(shí)踐，可以提高代碼的可復(fù)用性和可維護(hù)性，下面我們就來看看如何封裝一個(gè)公共的按鈕組件吧2023-08-08
解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題
這篇文章主要介紹了解決antd Form 表單校驗(yàn)方法無響應(yīng)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
基于vue實(shí)現(xiàn)一個(gè)神奇的動(dòng)態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡易的動(dòng)態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-05
vue打包部署到springboot的實(shí)現(xiàn)示例
項(xiàng)目開發(fā)中,一般我們都會(huì)使用SpringBoot+Vue進(jìn)行前后端開發(fā),本文主要介紹了vue打包部署到springboot的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
vue-element-admin如何設(shè)置默認(rèn)語言
這篇文章主要介紹了vue-element-admin如何設(shè)置默認(rèn)語言，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中對拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例
今天小編就為大家分享一篇Vue中對拿到的數(shù)據(jù)進(jìn)行A-Z排序的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09