108 lines
2.9 KiB
Plaintext
108 lines
2.9 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="n-layout-page-header">
|
|
<a-card :bordered="false" title="右键菜单"> 右键菜单示例，指定元素右键显示操作菜单 </a-card>
|
|
</div>
|
|
<a-card :bordered="false" class="mt-4 proCard">
|
|
<a-alert :show-icon="false" message="右键展示菜单" type="info">
|
|
<template #description>
|
|
<a-dropdown :trigger="['contextmenu']">
|
|
<a-button class="mt-2" type="primary" @contextmenu="handleContextMenu"
|
|
>右键试试</a-button
|
|
>
|
|
<template #overlay>
|
|
<a-menu @click="handleSelect">
|
|
<a-menu-item v-for="item in options" :key="item.key">
|
|
<span>{{ item.label }}</span>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
</a-alert>
|
|
|
|
<a-alert :show-icon="false" message="头像组件右键展示菜单" type="info" class="mt-4">
|
|
<template #description>
|
|
<a-dropdown :trigger="['contextmenu']">
|
|
<a-avatar :size="80" src="https://naive-ui-admin-docs.vercel.app/logo.png" />
|
|
<template #overlay>
|
|
<a-menu @click="handleSelect">
|
|
<a-menu-item v-for="item in options" :key="item.key">
|
|
<span>{{ item.label }}</span>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
</a-alert>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, nextTick } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import {
|
|
MailOutlined,
|
|
AndroidOutlined,
|
|
EllipsisOutlined,
|
|
QqOutlined,
|
|
WechatOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import { renderIcon } from '@/utils';
|
|
const options = [
|
|
{
|
|
label: '发送到邮箱',
|
|
key: 'email',
|
|
icon: renderIcon(MailOutlined),
|
|
},
|
|
{
|
|
label: '发送到手机',
|
|
key: 'mobile',
|
|
icon: renderIcon(AndroidOutlined),
|
|
},
|
|
{
|
|
label: '其他',
|
|
key: 'others',
|
|
icon: renderIcon(EllipsisOutlined),
|
|
children: [
|
|
{
|
|
label: 'QQ',
|
|
key: 'qq',
|
|
icon: renderIcon(QqOutlined),
|
|
},
|
|
{
|
|
label: '微信',
|
|
key: 'weixin',
|
|
icon: renderIcon(WechatOutlined),
|
|
},
|
|
],
|
|
},
|
|
];
|
|
const showDropdownRef = ref(false);
|
|
|
|
const xRef = ref(0);
|
|
const yRef = ref(0);
|
|
|
|
function handleSelect(e) {
|
|
const { key } = e;
|
|
showDropdownRef.value = false;
|
|
message.info(`您点击了，${key}菜单`);
|
|
}
|
|
|
|
function handleContextMenu(e) {
|
|
e.preventDefault();
|
|
showDropdownRef.value = false;
|
|
nextTick().then(() => {
|
|
showDropdownRef.value = true;
|
|
xRef.value = e.clientX;
|
|
yRef.value = e.clientY;
|
|
});
|
|
}
|
|
|
|
function onClickoutside() {
|
|
message.info('您点击了外部区域，菜单不见了哈！');
|
|
showDropdownRef.value = false;
|
|
}
|
|
</script>
|