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

基本用法

核心代码：

<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>3rd menu item（disabled）</a-menu-item></a-menu></template></a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

如何实现分割线：

<a-menu-divider />

如何实现禁用菜单：

<a-menu-item key="3" disabled>

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-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown>
</template>

在这里插入图片描述

案例：触发事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

核心代码：

<template><a-dropdown><a class="ant-dropdown-link" @click.prevent>Hover me, Click menu item<DownOutlined /></a><template #overlay><a-menu @click="onClick"><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>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';const onClick: MenuProps['onClick'] = ({ key }) => {console.log(`Click on item ${key}`);
};
</script>

如何实现下拉菜单点击事件？

  • 1、给menu-item加上key：<a-menu-item key="1">
  • 2、给menu加上点击事件：<a-menu @click="onClick">
  • 3、实现点击事件：const onClick: MenuProps['onClick'] = ({ key }) => {

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";const onClick = ({key}) => {alert(key)
}
</script>
<template><a-dropdown><a href="#" @click.prevent>下拉菜单<DownOutlined/></a><template #overlay><a-menu @click="onClick"><a-menu-item key="k1"><a href="#">选项1</a></a-menu-item><a-menu-item key="k2"><a href="#">选项2</a></a-menu-item><a-menu-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown>
</template>

在这里插入图片描述

案例：菜单弹出位置

核心代码：

<template><div id="components-dropdown-demo-placement"><template v-for="(placement, index) in placements" :key="placement"><a-dropdown :placement="placement"><a-button>{{ placement }}</a-button><template #overlay><a-menu><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a></a-menu-item><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a></a-menu-item><a-menu-item><a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a></a-menu-item></a-menu></template></a-dropdown><br v-if="index === 2" /></template></div>
</template>
<script lang="ts" setup>
import type { DropdownProps } from 'ant-design-vue';
const placements = ['bottomLeft','bottom','bottomRight','topLeft','top','topRight',
] as DropdownProps['placement'][];
</script>
<style scoped>
#components-dropdown-demo-placement .ant-btn {margin-right: 8px;margin-bottom: 8px;
}
</style>

如何控制下拉菜单弹出位置？

<a-dropdown :placement="placement">

都支持哪些位置？

const placements = ['bottomLeft','bottom','bottomRight','topLeft','top','topRight',
] as DropdownProps['placement'][];

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";const onClick = ({key}) => {alert(key)
}
</script>
<template>
<div class="bg-indigo-50 h-72 w-32 flex items-center justify-center"><a-dropdown placement="top"><a href="#" @click.prevent>下拉菜单<DownOutlined/></a><template #overlay><a-menu @click="onClick"><a-menu-item key="k1"><a href="#">选项1</a></a-menu-item><a-menu-item key="k2"><a href="#">选项2</a></a-menu-item><a-menu-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown>
</div>
</template>

在这里插入图片描述

案例：多级菜单

核心代码：

<template><a-dropdown><a class="ant-dropdown-link" @click.prevent>Cascading menu<DownOutlined /></a><template #overlay><a-menu><a-menu-item>1st menu item</a-menu-item><a-menu-item>2nd menu item</a-menu-item><a-sub-menu key="sub1" title="sub menu"><a-menu-item>3rd menu item</a-menu-item><a-menu-item>4th menu item</a-menu-item></a-sub-menu><a-sub-menu key="sub2" title="disabled sub menu" disabled><a-menu-item>5d menu item</a-menu-item><a-menu-item>6th menu item</a-menu-item></a-sub-menu></a-menu></template></a-dropdown>
</template>
<script lang="ts" setup>
import { DownOutlined } from '@ant-design/icons-vue';
</script>

如何实现多级菜单：

  • 一级菜单：<a-menu-item>1st menu item</a-menu-item>
  • 二级菜单父类：<a-sub-menu key="sub1" title="sub menu">
    • 二级菜单子类：<a-menu-item>3rd menu item</a-menu-item>

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";const onClick = ({key}) => {alert(key)
}
</script>
<template><div class="bg-indigo-50 h-72 w-32 flex items-center justify-center"><a-dropdown placement="top"><a href="#" @click.prevent>下拉菜单<DownOutlined/></a><template #overlay><a-menu @click="onClick"><a-menu-item key="k1"><a href="#">选项1</a></a-menu-item><a-sub-menu key="k2" title="选项2"><a-menu-item key="k21"><a href="#">选项2-1</a></a-menu-item><a-menu-item key="k22"><a href="#">选项2-2</a></a-menu-item></a-sub-menu><a-menu-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown></div>
</template>

在这里插入图片描述

案例：加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

核心代码：

<template><a-space direction="vertical"><a-dropdown-button type="primary" loading><template #overlay><a-menu><a-menu-item key="1">Submit and continue</a-menu-item></a-menu></template>Submit</a-dropdown-button><a-dropdown-button type="primary" size="small" loading><template #overlay><a-menu><a-menu-item key="1">Submit and continue</a-menu-item></a-menu></template>Submit</a-dropdown-button><a-dropdown-button type="primary" :loading="loading1" @click="enterLoading1"><template #overlay><a-menu><a-menu-item key="1">Submit and continue</a-menu-item></a-menu></template>Submit</a-dropdown-button><a-dropdown-button :loading="loading2" @click="enterLoading2">Submit<template #overlay><a-menu><a-menu-item key="1">Submit and continue</a-menu-item></a-menu></template><template #icon><DownOutlined /></template></a-dropdown-button></a-space>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
const loading1 = ref(false);
const loading2 = ref(false);
const enterLoading = (loading: Ref<boolean>) => {loading.value = true;setTimeout(() => {loading.value = false;}, 6000);
};
function enterLoading1() {enterLoading(loading1);
}
function enterLoading2() {enterLoading(loading2);
}
</script>

如何实现加载中状态：<a-dropdown-button type="primary" loading>

如何通过事件实现加载中状态：<a-dropdown-button :loading="loading2" @click="enterLoading2">

const enterLoading = (loading: Ref<boolean>) => {loading.value = true;setTimeout(() => {loading.value = false;}, 6000);
};function enterLoading2() {enterLoading(loading2);
}

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";const onClick = ({key}) => {alert(key)
}
</script>
<template><div class="bg-indigo-50 h-72 w-72 flex items-center justify-center"><a-dropdown-button placement="top" loading><a href="#" @click.prevent>下拉菜单<DownOutlined/></a><template #overlay><a-menu @click="onClick"><a-menu-item key="k1"><a href="#">选项1</a></a-menu-item><a-sub-menu key="k2" title="选项2"><a-menu-item key="k21"><a href="#">选项2-1</a></a-menu-item><a-menu-item key="k22"><a href="#">选项2-2</a></a-menu-item></a-sub-menu><a-menu-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown-button></div>
</template>

在这里插入图片描述

案例：控制加载中状态

如何通过事件实现加载中状态：<a-dropdown-button :loading="loading2" @click="enterLoading2">

const enterLoading = (loading: Ref<boolean>) => {loading.value = true;setTimeout(() => {loading.value = false;}, 6000);
};function enterLoading2() {enterLoading(loading2);
}

vue3示例：

<script setup>
import {DownOutlined} from "@ant-design/icons-vue";
import {ref} from "vue";const loading = ref(false)
const onClick = ({key}) => {alert(key)
}
const enterLoading = () => {loading.value = truesetTimeout(() => {loading.value = false}, 3000)
}
</script>
<template><div class="bg-indigo-50 h-72 w-72 flex items-center justify-center"><a-dropdown-button placement="top" :loading="loading" @click="enterLoading"><a href="#" @click.prevent>下拉菜单<DownOutlined/></a><template #overlay><a-menu @click="onClick"><a-menu-item key="k1"><a href="#">选项1</a></a-menu-item><a-sub-menu key="k2" title="选项2"><a-menu-item key="k21"><a href="#">选项2-1</a></a-menu-item><a-menu-item key="k22"><a href="#">选项2-2</a></a-menu-item></a-sub-menu><a-menu-divider/><a-menu-item disabled><a href="#">选项3</a></a-menu-item></a-menu></template></a-dropdown-button></div>
</template>

在这里插入图片描述

属性

参数说明类型默认值
align该值将合并到 placement 的配置中，设置参考 dom-alignObject-
arrow下拉框箭头是否显示boolean | { pointAtCenter: boolean }false3.3.0
destroyPopupOnHide关闭后是否销毁 Dropdownbooleanfalse3.0
disabled菜单是否禁用boolean-
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。Function(triggerNode)() => document.body
overlay(v-slot)菜单Menu-
overlayClassName下拉根元素的类名称string-
overlayStyle下拉根元素的样式object-
placement菜单弹出位置bottomLeftbottombottomRight
trigger触发下拉的行为, 移动端不支持 hoverArray<clickhovercontextmenu>
open(v-model)菜单是否显示boolean-

事件

事件名称说明回调参数版本
openChange菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发function(open)4.0

dropdown-button 属性

参数说明类型默认值版本
disabled菜单是否禁用boolean-
icon右侧的 iconVNode | slot-1.5.0
loading设置按钮载入状态boolean | { delay: number }false3.0
overlay(v-slot)菜单Menu-
placement菜单弹出位置bottomLeftbottombottomRight
size按钮大小，和 Button 一致string‘default’
trigger触发下拉的行为Array<clickhovercontextmenu>
type按钮类型，和 Button 一致string‘default’
open(v-model)菜单是否显示boolean-

dropdown-button 事件

事件名称说明回调参数版本
click点击左侧按钮的回调，和 Button 一致Function
openChange菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发function(open)4.0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/25650.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件心学格物致知篇(7)软件开发文档写什么

软件心学格物致知篇(7)软件开发文档写什么

软件心学格物致知篇(7)软件开发文档写什么 前言 当今约束大家生产力的有哪些因素&#xff1f;是编程语言&#xff1f;开发框架&#xff1f;开发IDE&#xff1f;还是自身迫切需要更高水平的技能&#xff1f; 好像上面的每一项技术都在不断发展&#xff0c;也在不断的为我们生…
阅读更多...
Spring Event如何优雅实现系统业务解耦

Spring Event如何优雅实现系统业务解耦

Spring Event如何优雅实现系统业务解耦 一、介绍 Spring事件&#xff08;Spring Event&#xff09;是Spring框架的一项功能&#xff0c;它允许不同组件之间通过发布-订阅机制进行解耦的通信。在Spring中&#xff0c;事件是表示应用程序中特定事件的对象&#xff0c;例如用户注…
阅读更多...
在win11系统上安装启动Hyper-V

在win11系统上安装启动Hyper-V

Hyper-V 是微软公司开发的一种虚拟化技术&#xff0c;它允许一台物理计算机运行多个操作系统和应用程序&#xff0c;从而提供更好的资源利用率和系统灵活性。 win系统的linux子系统开启、android studio的虚拟环境都需要这个东西&#xff0c;而在初始的win11系统上可能没有这个…
阅读更多...
Nvidia/算能 +FPGA+AI大算力边缘计算盒子：电力巡检智能机器人

Nvidia/算能 +FPGA+AI大算力边缘计算盒子：电力巡检智能机器人

聚焦数字经济与双碳经济赛道&#xff0c;专注于提供集中式新能源场站与分布式综合能源数智化整体解决方案&#xff0c;坚持以场站数字化、综合能源数字化双轮驱动发展。依靠专业化人才队伍与丰富的实证基地研究经验&#xff0c;打造成熟、先进的数智新能源研发平台。 在集中式新…
阅读更多...
Docker Swarm集群部署管理

Docker Swarm集群部署管理

Docker Swarm集群管理 文章目录 Docker Swarm集群管理资源列表基础环境一、安装Docker二、部署Docker Swarm集群2.1、创建Docker Swarm集群2.2、添加Worker节点到Swarm集群2.3、查看Swarm集群中Node节点的详细状态信息 三、Docker Swarm管理3.1、案例概述3.2、Docker Swarm中的…
阅读更多...
【Web世界探险家】3. CSS美学（二）文本样式

【Web世界探险家】3. CSS美学（二）文本样式

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…
阅读更多...
基于深度学习的中文语音识别模型（支持wav、mp4、m4a等所有格式音频上传）【已开源】

基于深度学习的中文语音识别模型（支持wav、mp4、m4a等所有格式音频上传）【已开源】

基于深度学习的中文语音识别模型&#xff08;支持wav、mp4、m4a等所有格式音频上传&#xff09; 前言 该开源项目旨在提供一个能够自动检测并识别中文语音的模型&#xff0c;支持wav、mp4、m4a等格式的音频文件上传。无论是从录音设备中获取的wav文件&#xff0c;还是从视频中…
阅读更多...
外部排序快速入门详解:基本原理，败者树，置换-选择排序，最佳归并树

外部排序快速入门详解:基本原理，败者树，置换-选择排序，最佳归并树

文章目录 外部排序1.最基本的外部排序原理2.外部排序的优化2.1 败者树优化方法2.2 置换-选择排序优化方法2.3 最佳归并树 外部排序 为什么要学习外部排序&#xff1f; 答&#xff1a; 在处理数据的过程中&#xff0c;我们需要把磁盘(外存&#xff09;中存储的数据拿到内存中处理…
阅读更多...
ue5创建地图瓦片

ue5创建地图瓦片

先在虚幻商城下载免费的paperzd插件&#xff0c;并启用。 导入资源后&#xff0c;先通过应用paper2d纹理资源&#xff0c;将去掉导入ue时产生的边缘模糊&#xff0c;再点击下面的创建瓦片集&#xff0c; 打开瓦片集&#xff0c;发现选中不对&#xff0c; 改变瓦片大小为16*…
阅读更多...
ChatGPT对话基本原则和玩法

ChatGPT对话基本原则和玩法

一、使用三个准备 1.1 认知上 超级学霸&#xff0c;几乎所有的工作/生活场景&#xff0c;都可以找它帮忙 ChatGPT作为一个人工智能语言模型&#xff0c;具有强大的知识储备和处理能力。这意味着在许多工作和生活场景中&#xff0c;你都可以向它请教问题或寻求帮助。无论是科…
阅读更多...
Virustotal查询恶意进程

Virustotal查询恶意进程

1、使用netstat查看可疑进程 执行ls -al /proc/$PID/exe确认可疑进程对应的文件&#xff1b;若文件未被删除&#xff0c;则直接上传文件到Virustotal进行检测&#xff0c;或者计算出文件对应的md5&#xff0c;使用md5去Virustotal进行查询&#xff1b;若文件已被删除&#xff0…
阅读更多...
Python第二语言（七、Python模块）

Python第二语言（七、Python模块）

目录 1. 什么是模块 2. 基本语法 2.1 模块的导入方式 2.2 基本语法 import 模块名 2.3 基本语法 from 模块名 import 功能名 2.4 基本语法as 别名 3. 自定义模块 4. 调用自定义模块时&#xff0c;如何让其模块中的函数不被调用&#xff08;__name__&#xff09; 5. 调…
阅读更多...
基于SSM+Jsp的家用电器销售网站

基于SSM+Jsp的家用电器销售网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…
阅读更多...
微信小程序获取 OpenId 和 UnionId

微信小程序获取 OpenId 和 UnionId

文章目录 1.什么是 OpenId 和 UnionId&#xff1f;2.获取 OpenId 和 UnionId 的办法3.备注 前言&#xff1a;最近开发小程序&#xff0c;需要通过用户登录的唯一值存储数据&#xff0c;查看手册发现要使用的是 “OpenId” 和 “UnionId” 1.什么是 OpenId 和 UnionId&#xff1…
阅读更多...
仓储系统的设计

仓储系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;用户管理&#xff0c;试剂管理&#xff0c;安全管理&#xff0c;存储管理 用户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;试剂管理&#xff0c;安全管…
阅读更多...
快速搭建rtsp server(Ubuntu)

快速搭建rtsp server(Ubuntu)

在现代视频监控和实时视频流媒体应用中&#xff0c;实时流协议&#xff08;RTSP&#xff09;服务器扮演着至关重要的角色。无论是家庭安防系统、企业级监控还是流媒体服务&#xff0c;RTSP服务器都能提供高效、稳定的解决方案。然而&#xff0c;对于许多初学者或开发者来说&…
阅读更多...
机器学习--生成式模型和判别式模型的具体分析

机器学习--生成式模型和判别式模型的具体分析

文章目录 生成式模型和判别式模型的具体分析生成式模型定义工作原理优点缺点常见模型 判别式模型 总结生成式模型判别式模型 生成式模型和判别式模型的具体分析 生成式模型和判别式模型在机器学习中有着不同的目标、应用场景和性能特点。以下将详细分析它们的定义、工作原理、…
阅读更多...
【qt】绘图

【qt】绘图

绘图 一.画家二.绘图事件三.坐标体系四.画笔1.setColor2.setWidth3.setStyle4.setCapStyle5.setJoinStyle6.给画家配置笔 五.画刷1.setColor2.setStyle3.给画家设置刷子 六.用到的类汇总1.QRect 矩形2.QPoint 点3.QImage 图片4.QPixmap 图片5.QLine 线6.QPainterPath 路径 七.开…
阅读更多...
aabb c++

aabb c++

题目描述 查找形如"aabb"的四位完全平方数&#xff0c;也即前两位数字相同&#xff0c;后两位数字也相同。 输入 无 输出 若干行&#xff0c;每行一个符合条件的四位数&#xff08;从小到大&#xff09;。 分析&#xff1a; 完全平方数&#xff1a; &#xff…
阅读更多...
中国蚁剑 安装教程 2024年5月

中国蚁剑 安装教程 2024年5月

2024/5/11 中国蚁剑 安装教程 一、下载中国蚁剑的加载器和核心源码&#xff08;两个都要用到&#xff09; github官方下载地址&#xff1a;https://github.com/AntSwordProject/ 参考文档&#xff1a;antSword/README_CN.md at master AntSwordProject/antSword GitHub 核…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023