鼠标移上出现下拉菜单的用vue要怎么写?

如题,导航要求鼠标移到关于时出现下拉菜单,我的思路如下
image.png
我的思路如下,用child控制是否有下拉菜单,用child.show控制下拉菜单显示,问题来了,移上鼠标后如何对应修改child.show?

 <div class="nav-bt">
        <ul class="clearfix father-ul">
          <li v-for="item in navs">
            <router-link :to="item.href" v-text="item.content" >
            </router-link>
            <div class="drop-div" v-if="!!item.child" v-show="item.child.show">
              <span class="trangle"></span>
              <ul class="child-ul">
                <li v-for="item_child in item.child.child_content">
                  <router-link :to="item_child.href">{{item_child.content}}</router-link>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
data(){
    return{
      navs: [{
            content: '首页',
            href: this.$store.state.page_src.index_src,
            cur: true,
            child: null
          },
          {
            content: '关于',
            href: this.$store.state.page_src.company_src,
            cur: false,
            child: {
              show: false,
              child_content: [{
                content: '1',
                href: this.$store.state.page_src.introduce_src,
              }, {
                content: '2',
                href: this.$store.state.page_src.charge_src,
              }, {
                content: '3',
                href: this.$store.state.page_src.trading_src,
              }, {
                content: '4',
                href: this.$store.state.page_src.contract_src,
              }, {
                content: '5',
                href: this.$store.state.page_src.risk_src,
              }]
            }

          },
          {
            content: '介绍',
            href: this.$store.state.page_src.about_src,
            cur: false,
            child: null
          }
        ]
    }
}

      
阅读 1.3k
评论
    5 个回答
    • 1.1k

    用css的:hover去控制样式

      • 272

      建议动态style或class控制显示隐藏

        <div class="nav-bt">

            <ul class="clearfix father-ul">
              <li v-for="item in navs">
                <router-link :to="item.href" v-text="item.content" >
                </router-link>
                <div class="drop-div" v-if="!!item.child" v-show="item.child.show">
                  <span class="trangle"></span>
                  <ul class="child-ul">
                    <li v-for="(item_child,index) in item.child.child_content"         
                    @click="clickAction(item_child,index)">
                      <router-link :to="item_child.href">{{item_child.content}}</router-link>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
          
          methods:{
          
              clickAction(item,index){
                  //这里修改 的逻辑
              }
          }
          • 319

          大概思路是这样,在data里新增个变量showIndex,监听鼠标移入事件,绑定到要鼠标要移入的dom,当鼠标移入到dom上时,让showIndex等于当前移入的index,同时循环里判断如果自己的index等于showIndex就展示,代码如下。

          <div class="nav-bt">
              <ul class="clearfix father-ul">
                <li v-for="(item,index) in navs" @mouseover="showIndex=index">
                  <router-link :to="item.href" v-text="item.content" >
                  </router-link>
                  <div class="drop-div" v-if="!!item.child" v-show="index==showIndex">
                    <span class="trangle"></span>
                    <ul class="child-ul">
                      <li v-for="item_child in item.child.child_content">
                        <router-link :to="item_child.href">{{item_child.content}}</router-link>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
          </div>

            移入事件 mousemove

              撰写回答

              登录后参与交流、获取后续更新提醒