求助,vue怎么做二级旋转下拉菜单。

海星吧 2019-9-9 3909

讲道理不是我懒啊,我本身技术就很弱鸡,上个星期看到了一个网站上的导航栏有个旋转下拉菜单的效果,我就想拖到vue上做一个组件出来。

QQ图片20190909115456.png

但我就此陷入了一个坑。

那个纯css的旋转下拉菜单的效果是根据nth-chlid选择器里面写死的位置给他动画延迟的时间。

如果我要做到这样,应该是需要获取到二级数组的index,*延迟时间,但是我却不能在一级循环的

v-for标签里面给@mouseenter="enter(index)"添加二级数组的indexs,如果这么做会报错。

网上也找不到相应的资料,想必是没人发过这样的东西的。

下面是我目前写了的东西,如果有那个大佬知道怎么做的话,给个思路就行。


顺便可能会有人问我为什么不更react 了。。。其实用了一段时间的react之后还是觉得vue比较香。

<style lang="scss" scoped="">

 .News_body{

   .menu{

     width: 500px;

     height: 200px;

     background-color: cadetblue;

     display: flex;

     .menuliActive{

        color:deeppink;

        background-color:black;

     }

     .menu_li{

       background-color: white;

        margin: 0;

        text-align: center;

        .menu_li_a{

          padding-left: 20px;

        }

        .menu_cher_li{

          transform:rotateY(-90deg);

          transition: all 2s;

          opacity:0;

          background-color: #999;

        }

        .menu_cher_li_Active{

          transform:rotateY(0deg);

          opacity:1;

        }

        .menu_cher_li_Active a{

          color: red;

        }

     }

   }


 }

</style>

<template>

<div>

新闻列表

    <ul>

      <li :class="{menu_li:true}" v-for="(item,index) in menuList" @mouseleave="leave()">

        <a href="javascript:;" :class="item.class" @mouseenter="enter(index,indexs)"><span>{{item.onemenu}}</span>

          <i class="dropimg iconfont icon-arr-left"></i></a>

        <ul>

          <li :class="{menu_cher_li:true,menu_cher_li_Active:index==enterindex}" v-for="(items,indexs) in item.secondMenu">

            <a href="javascript:;">{{items.second}}</a></li>

        </ul>

      </li>

    </ul>

</div>

</template>


<script>

export default{

data(){

return{

        enterindex:-1,

        enterNth:0,

        menuList:[

          {onemenu:'首页',class:'menu_li_a iconfont icon-index',secondMenu:[{second:'企业展示'},{second:'作品展示'},{second:'博客List'},{second:'CMS布局'},]},

          {onemenu:'商城演示',class:'menu_li_a iconfont icon-gouwuche',secondMenu:[{second:'主题购买'},{second:'再来购买'},]},

          {onemenu:'作品中心',class:'menu_li_a',secondMenu:[{second:'自然'},{second:'花语'},{second:'旅游'},{second:'登山'},]},

          {onemenu:'博客列表',class:'menu_li_a',secondMenu:[{second:'WordPress'},{second:'原创主题'},]},

        ]

}

},

    mounted() {


    },

    methods:{

      enter(index){

        this.enterindex=index;

        let Active = document.getElementsByClassName("menu_cher_li_Active")


      },

      leave(){

        this.enterindex=-1

      },

    }

}

</script>


弱鸡程序员年底还在加班
最新回复 (0)
    • ACG里世界
      2
          
返回
发新帖