notation/src/pc/home/component/file-btn/index.tsx

import { NDropdown } from "naive-ui";
import { defineComponent } from "vue";
import styles from "./index.module.less";
import { getImage } from "../../images";
import { DropdownMixedOption } from "naive-ui/es/dropdown/src/interface";

/** 新建 | 保存 | 导入 | 上传 | 导出 | 打印 | 退出*/
export type IFileBtnType = "newMusic" | "save" | "xml" | "upload" | "png" | "wav" | "midi" | "print" | 'exit';

export default defineComponent({
	name: "FileBtn",
	emits: ["select"],
	setup(props, { emit }) {
		const options: DropdownMixedOption[] = [
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_4.png")} />
						<span>新建曲谱</span>
					</div>
				),
				key: "newMusic",
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
						<span>保存</span>
					</div>
				),
				key: "save",
			},
			// {
			// 	label: () => (
			// 		<div class={styles.dropItem}>
			// 			<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
			// 			<span>导入</span>
			// 		</div>
			// 	),
			// 	key: "import",
			// 	disabled: true,
			// 	children: [
			// 		{
			// 			label: "xml",
			//             key: 'xml',
			// 			disabled: true
			// 		},
			// 	],
			// },
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_1.png")} />
						<span>上传到我的资源</span>
					</div>
				),
				key: "upload",
				disabled: true,
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_2.png")} />
						<span>导出</span>
					</div>
				),
				key: "export",
				children: [
					{
						label: "PNG",
						key: "png",
					},
					{
						label: "WAV",
						key: "wav",
					},
					{
						label: "MIDI",
						key: "midi",
					},
				],
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_3.png")} />
						<span>打印</span>
					</div>
				),
				key: "print",
				disabled: true,
			},
			{
				label: () => (
					<div class={styles.dropItem}>
						<img class={styles.dropIcon} src={getImage("icon_26_5.png")} />
						<span>退出</span>
					</div>
				),
				key: "exit",
				disabled: false,
			},
		];
		return () => (
			<NDropdown
				class={styles.dropWrap}
				options={options}
				trigger="click"
				onSelect={(val) => {
					console.log("🚀 ~ val:", val);
					emit("select", val);
				}}
			>
				<div class={styles.btnImg}>
					<img class={styles.topBtnIcon} src={getImage("icon_0.png")} />
				</div>
			</NDropdown>
		);
	},
});