美文网首页
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