// 按需加载
<n-space>
<n-avatar round size="medium" src="https://jekip.github.io/assets/schoolboy.9f04cdf7.png" />
<n-dropdown :show="showDropdown" :options="options">
<n-button @click="handleClick">我是头像</n-button>
</n-dropdown>
</n-space>
<script lang="ts" setup>
import { NIcon, NSpace, NAvatar, NDropdown } from "naive-ui";
import {
PersonCircleOutline as PersonCircleOutlineIcon,
LogOutOutline as LogOutOutlineIcon
} from "@vicons/ionicons5";
const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
});
};
};
const options: any = ref([
{
label: "用户资料",
key: "profile",
icon: renderIcon(PersonCircleOutlineIcon)
},
{
label: "退出登录",
key: "logout",
icon: renderIcon(LogOutOutlineIcon)
}
]);
const handleClick = () => {
console.log(showDropdown.value, "showDropdownRef.value");
showDropdown.value = !showDropdown.value;
};
</script>
2. 使用dialog
//子组件header
import { NIcon, NAvatar, NDropdown, useDialog } from "naive-ui"
const dialog = useDialog();
<n-dialog-provider></n-dialog-provider>
const doLogout = () => {
dialog.info({
title: "提示",
content: "您确定要退出登录吗",
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
},
onNegativeClick: () => {}
});
};
//父组件
<n-dialog-provider>
<Header></Header>
</n-dialog-provider>