美文网首页
ant-design-vue 在 vue3中如何使用Dropdo

ant-design-vue 在 vue3中如何使用Dropdo

作者: bethel | 来源:发表于2021-05-20 18:19 被阅读0次

注意:在vue 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slotslot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

ant-design-vue (vue3.0 及 typescript): https://2x.antdv.com/components/dropdown-cn

ant-design-vue Dropdown 在vue 2.6.0之后的写法:

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      Hover me, Click menu item <a-icon type="down" />
    </a>
    <template #overlay>
        <a-menu>
          <a-menu-item key="1">item1</a-menu-item>
          <a-menu-item key="2">item2</a-menu-item>
        </a-menu>
    </template>
  </a-dropdown>
</template>

ant-design-vue Dropdown 在vue 2.6.0之前的写法:

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      Hover me, Click menu item <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item key="1">item1</a-menu-item>
      <a-menu-item key="2">item2</a-menu-item>
    </a-menu>
  </a-dropdown>
</template>

相关文章

网友评论

      本文标题:ant-design-vue 在 vue3中如何使用Dropdo

      本文链接:https://www.haomeiwen.com/subject/lrebjltx.html