Python私教张大鹏 Vue3整合AntDesignVue之Dropdown 下拉菜单

最新推荐文章于 2024-09-15 16:39:46 发布

源滚滚AI Python私教10年

最新推荐文章于 2024-09-15 16:39:46 发布

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： Web Vue 文章标签： python vue.js javascript

本文链接：https://blog.csdn.net/qq_37703224/article/details/139571018

基本用法

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="javascript:;">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;">3rd menu item</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts" setup>
import {
     
      DownOutlined } from '@ant-design/icons-vue';
</script>

vue3示例：

<script setup>
import {
     
     DownOutlined} from "@ant-design/icons-vue";
</script>
<template>
  <a-dropdown>
    <a href="" @click.prevent>
      下拉菜单
      <DownOutlined/>
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

右键菜单

默认是移入触发菜单，可以点击鼠标右键触发。

核心代码：

<template>
  <a-dropdown :trigger="['contextmenu']">
    <div
      :style="{
        textAlign: 'center',
        background: '#f7f7f7',
        height: '200px',
        lineHeight: '200px',
        color: '#777',
      }"
    >
      Right Click on here
    </div>
    <template #overlay>
      <a-menu>
        <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

vue3示例：

<script setup>
import {
     
     DownOutlined} from "@ant-design/icons-vue";
</script>
<template>
  <a-dropdown  :trigger="['contextmenu']">
    <div class="w-72 h-32 bg-indigo-500"></div>
    <template #overlay>
      <a-menu>
        <a-menu-item>
          <a href="#">选项1</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项2</a>
        </a-menu-item>
        <a-menu-item>
          <a href="#">选项3</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

在这里插入图片描述

案例：分割线和不可用菜单项

核心代码：

<template>
  <a-dropdown>
    <a class="ant-dropdown-link" @click.prevent>
      Hover me
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item key="0">
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
            1st menu item
          </a>
        </a-menu-item>
        <a-menu-item key="1">
          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
            2nd menu item
          </a>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3" disabled