span标签的鼠标滑入提示_Vue实战—商品分类菜单数量提示（10）

如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。

好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。

<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuScroll">
      <ul>
        <!--专场-->
        <li class="menu-item" :class="{'current':currentIndex===0}" @click="selectMenu(0)">
          <p class="text">
            <img :src="container.tag_icon" v-if="container.tag_icon" class="icon">
            {
    {
    container.tag_name}}
          </p>
        </li>
        <li
          class="menu-item"
          v-for="(item,index) in goods"
          :class="{'current':currentIndex===index+1}"
          @click="selectMenu(index+1)"
        >
          <p class="text">
            <img :src="item.icon" v-if="item.icon" class="icon">
            {
    {
    item.name}}
          </p>
          <i class="num" v-show="calculateCount(item.spus)">{
    {
    calculateCount(item.spus)}}</i>//通过i标签展示数量
        </li>
      </ul>
    </div>
    <!-- 右侧商品列表 -->
    <div class="foods-wrapper" ref="foodScroll">
      <!--专场-->
      <ul>
        <li class="container-list food-list-hook">
          <div v-for="item in container.operation_source_list">
            <img :src="item.pic_url">
          </div>
        </li>
        <!-- 具体分类-->
        <li v-for="item in goods" class="food-list food-list-hook">
          <h3 class="title">{
    {
    item.name}}&l