查看: 1492|回复: 1
打印 上一主题 下一主题

如何结合el-menu使用

[复制链接]
  • TA的每日心情
    奋斗
    2019-8-6 07:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    帖子

    40

    积分

    新手上路

    Rank: 1

    积分
    40
    跳转到指定楼层
    楼主
    发表于 2019-8-4 07:52:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    请教如何结合 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'
            }
          },




    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2019-8-6 07:16
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    帖子

    40

    积分

    新手上路

    Rank: 1

    积分
    40
    沙发
     楼主| 发表于 2019-8-6 07:18:05 | 只看该作者
    我用这个方法解决了,不知道有无更好的方法:
    1. <el-col style="width:calc(100% - 430px);display:flex">

    2.           <div class="swiper-prev">
    3.             <transition name="el-fade-in-linear">
    4.               <i v-show="showLeftArr" class="el-icon-arrow-left"></i>
    5.             </transition>
    6.           </div>

    7.           <div style="overflow:hidden">
    8.             <el-menu class="swiper-wrapper menu-top" mode="horizontal" @select="handleMenuClick">
    9.               <swiper ref="menuSwiper" :options="swiperOption">
    10.                 <el-menu-item v-for="(item,index) in menuList" class="swiper-slide" :index="index.toString()" :key="item.id">{{item.name}}</el-menu-item>
    11.               </swiper>
    12.             </el-menu>
    13.           </div>

    14.           <div class="swiper-next">
    15.             <transition name="el-fade-in-linear">
    16.               <i v-show="showRightArr" class="el-icon-arrow-right"></i>
    17.             </transition>
    18.           </div>

    19.         </el-col>
    复制代码
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-1 07:05 , Processed in 0.062428 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表