|
@@ -5,116 +5,116 @@ import { getImage } from "../../images";
|
|
import { DropdownMixedOption } from "naive-ui/es/dropdown/src/interface";
|
|
import { DropdownMixedOption } from "naive-ui/es/dropdown/src/interface";
|
|
|
|
|
|
/** 新建 | 保存 | 导入 | 上传 | 导出 | 打印 | 退出*/
|
|
/** 新建 | 保存 | 导入 | 上传 | 导出 | 打印 | 退出*/
|
|
-export type IFileBtnType = "newMusic" | "save" | "xml" | "upload" | "png" | "wav" | "midi" | "print" | 'exit';
|
|
|
|
|
|
+export type IFileBtnType = "newMusic" | "save" | "xml" | "upload" | "png" | "wav" | "midi" | "print" | "exit";
|
|
|
|
|
|
export default defineComponent({
|
|
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>
|
|
|
|
- );
|
|
|
|
- },
|
|
|
|
|
|
+ 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>
|
|
|
|
+ );
|
|
|
|
+ },
|
|
});
|
|
});
|