vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能

更新時(shí)間：2024年05月07日 15:19:10 作者：Favour72

這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動(dòng),感興趣的朋友可以參考下實(shí)現(xiàn)代碼

原本是可以用el-tabs做的,就像下面的樣式,但是領(lǐng)導(dǎo)說(shuō)不行

最后用button和element里面的el-carousel(走馬燈)結(jié)合了一下

長(zhǎng)這樣感覺(jué)還不錯(cuò) 可以自己改樣式

代碼如下:

        <div class="drawer-carousel">
          <el-carousel arrow="always" :loop="false" :initial-index="0" indicator-position="none" :autoplay="false"
            height="60px" :items-per-page="6">
            <el-carousel-item v-for="(group, index) in Math.ceil(tabs.length / 6)" :key="index">
              <div class="button-group">
                <el-button v-for="(tab, tabIndex) in tabs.slice(index * 6, (index + 1) * 6)" :key="tabIndex"
                  @click="handleClickReport(tab.reportCoreId)" size="medium">
                  <el-tooltip :content="tab.reportCoreName" :disabled="isShowTooltip" :open-delay="100" placement="top"
                    effect="light">
                    <span class="span-ellipsis" @mouseover="mouseOver($event)">{{ tab.reportCoreName }}</span>
                  </el-tooltip>
                </el-button>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

解釋一下

arrow="always" 顯示左右箭頭，loop="false" 表示不循環(huán)滾動(dòng)，indicator-position="none" 表示不顯示指示器，:autoplay="false" 表示不自動(dòng)播放，height="60px" 設(shè)置 Carousel 的高度，:items-per-page="6" 表示每頁(yè)顯示6個(gè)按鈕。

<el-carousel-item>：這是 Carousel 的每一頁(yè), 用 v-for 循環(huán)來(lái)生成足夠的 Carousel 頁(yè)面，存放所有的按鈕。Math.ceil(tabs.length / 6) 計(jì)算出需要多少頁(yè)，每頁(yè)6個(gè)按鈕。

<el-button>：用 v-for 循環(huán)來(lái)生成每一頁(yè)中的6個(gè)按鈕。用 tabs.slice(index * 6, (index + 1) * 6) 來(lái)選取每頁(yè)6個(gè)按鈕，確保在當(dāng)前頁(yè)面范圍內(nèi)顯示正確的按鈕。

一些css樣式

  .drawer-carousel {
    padding: 10px 10px 0 0;
    position: relative;
    .button-group {
      margin: 0 20px 0 40px;
      white-space: nowrap;
      span {
        display: inline-block;
        width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  } 
//按鈕樣式
 .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    font-size: 30px;
    color: #1C1C1C;
  }
  .el-carousel__arrow--left {
    left: 0px;
  }
  .el-carousel__arrow--right {
    right: 0;
  }

如果放六個(gè)超出了,就設(shè)置一下button不換行再給里面的文字設(shè)置超出顯示省略號(hào)就好了

到此這篇關(guān)于vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能的文章就介紹到這了,更多相關(guān)vue elementUI左右箭頭切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: