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"
	| "down-xml"
	| "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: "XML",
						key: "down-xml",
					},
					{
						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,
			},
		];
		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>
		);
	},
});