Swiper中文论坛

标题: 如何结合el-menu使用 [打印本页]

---

作者: 学习交流    时间: 2019-8-4 07:52
标题: 如何结合el-menu使用
请教如何结合 el-menu来使用？

       <swiper :options="swiperOption">
          <el-menu class="el-menu-demo swiper-wrapper" mode="horizontal">
            <el-menu-item v-for="o in swiperSlides" :key="o" index="1">菜单{{o}}</el-menu-item>
          </el-menu>
        </swiper>



swiperOption: {
        slidesPerView: 'auto',
        navigation: {
          nextEl: '.swiper-next',
          prevEl: '.swiper-prev'
        }
      },

---

作者: 学习交流    时间: 2019-8-6 07:18
我用这个方法解决了，不知道有无更好的方法：

1. <el-col style="width:calc(100% - 430px);display:flex">
   
2. 
   
3.           <div class="swiper-prev">
   
4.             <transition name="el-fade-in-linear">
   
5.               <i v-show="showLeftArr" class="el-icon-arrow-left"></i>
   
6.             </transition>
   
7.           </div>
   
8. 
   
9.           <div style="overflow:hidden">
   
10.             <el-menu class="swiper-wrapper menu-top" mode="horizontal" @select="handleMenuClick">
    
11.               <swiper ref="menuSwiper" :options="swiperOption">
    
12.                 <el-menu-item v-for="(item,index) in menuList" class="swiper-slide" :index="index.toString()" :key="item.id">{{item.name}}</el-menu-item>
    
13.               </swiper>
    
14.             </el-menu>
    
15.           </div>
    
16. 
    
17.           <div class="swiper-next">
    
18.             <transition name="el-fade-in-linear">
    
19.               <i v-show="showRightArr" class="el-icon-arrow-right"></i>
    
20.             </transition>
    
21.           </div>
    
22. 
    
23.         </el-col>

复制代码

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2