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

import { NDropdown, NSpin } from "naive-ui";
import { computed, defineComponent, ref, watch } 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"],
  props: {
    saveLoading: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const options = computed(() => {
      return [
        {
          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>
              {props.saveLoading && <NSpin style={{ marginLeft: "auto" }} size={14}></NSpin>}
            </div>
          ),
          key: "save",
          disabled: props.saveLoading,
        },
        {
          label: () => (
            <div class={styles.dropItem}>
              <img class={styles.dropIcon} src={getImage("icon_26_6.png")} />
              <span>导入</span>
            </div>
          ),
          key: "import",
          // disabled: true,
          children: [
            {
              label: "XML",
              key: "xml",
              // disabled: true,
            },
            {
              label: "PDF",
              key: "import-pdf",
              // disabled: true,
            },
            {
              label: "PNG，JPG",
              key: "import-image",
              // 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.value}
        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>
    );
  },
});