a-menu菜单

388 阅读1分钟

"ant-design-vue": "^3.2.20"

a-menu-item需要key

如果不加key,点击时会影响其他item

悬浮菜单

如果Menu直接作为悬浮菜单出现,v-showv-if会有所不同

    <a-menu v-if="menuProp.visible" :style="menuProp.style" class="custom-menu">
      <a-menu-item @click="downloadVideo" key="downloadVideo">
        <img class="icon-img" src="/@/assets/Icons/download.png" />
        下载
      </a-menu-item>
      <a-menu-item @click="removeTag" key="removeTag">
        <img class="icon-img" src="/@/assets/Icons/remove.png" />
        删除
      </a-menu-item>

      <a-menu-item
        key="handleCreateNewTag"
        :style="{backgroundColor:menuProp.customTagVisible ? '#28282C' : '',color:menuProp.initStyle ? '#ffffff':''}"
        @mouseover="showCustomTag"
        @mouseleave="closeCustomTag"
        @click="handleCreateNewTag"
      >
        <img class="icon-img" src="/@/assets/Icons/custom_tag.png" />
        <span style="margin: 0 20px 0 0;">自定义标签</span>
        <right-outlined />
      </a-menu-item>
    </a-menu>

使用v-show点击某项item后,会变蓝,关闭再次打开后点击过的依旧变蓝。而v-if不会

如果还是会出现,使用手动样式覆盖

同时可以利用这个bug,对于某些需求使用v-show,再次打开会显示上次点击过的item