diff --git a/packages/oh-my-live2d/src/modules/menus.ts b/packages/oh-my-live2d/src/modules/menus.ts index ff964ae..75f5f51 100644 --- a/packages/oh-my-live2d/src/modules/menus.ts +++ b/packages/oh-my-live2d/src/modules/menus.ts @@ -4,7 +4,7 @@ import { LoadOhMyLive2D } from './load-oml2d.js'; import { DEFAULT_OPTIONS, ELEMENT_ID } from '../config/index.js'; import { WindowSizeType } from '../constants/index.js'; import { Item } from '../types/common.js'; -import type { CSSProperties, DefaultMenusOptions, DefaultOptions, MenusOptions } from '../types/index.js'; +import type { CSSProperties, DefaultMenusOptions, DefaultOptions, MenusOptions, ModelOptions } from '../types/index.js'; import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js'; export class Menus { @@ -12,7 +12,8 @@ export class Menus { private style: CSSProperties = {}; private itemStyle: CSSProperties = {}; private menuItemList: HTMLElement[] = []; - private _menuOptions: DefaultMenusOptions = DEFAULT_OPTIONS.menus as DefaultMenusOptions; + private _menuOptions: DefaultMenusOptions = DEFAULT_OPTIONS.menus; + constructor( private options: DefaultOptions, private globalOml2d: LoadOhMyLive2D @@ -22,11 +23,14 @@ export class Menus { return this._menuOptions; } - private set menuOptions(opt: MenusOptions | ((index?: number) => MenusOptions)) { + private set menuOptions(opt: MenusOptions | ((model: ModelOptions, index: number) => MenusOptions)) { let finalOpt: DefaultMenusOptions; if (isFunction(opt)) { - finalOpt = mergeDeep(DEFAULT_OPTIONS.menus, opt(this.globalOml2d.modelIndex)) as DefaultMenusOptions; + finalOpt = mergeDeep( + DEFAULT_OPTIONS.menus, + opt(this.options.models[this.globalOml2d.modelIndex || 0], this.globalOml2d.modelIndex || 0) + ) as DefaultMenusOptions; } else { finalOpt = opt as DefaultMenusOptions; } @@ -57,7 +61,7 @@ export class Menus { if (isArray(this.menuOptions.items)) { this.createMenuItemElements(this.menuOptions.items); } else if (isFunction(this.menuOptions.items)) { - const items = this.menuOptions.items((DEFAULT_OPTIONS.menus as DefaultMenusOptions).items); + const items = this.menuOptions.items(DEFAULT_OPTIONS.menus.items); this.createMenuItemElements(items); } diff --git a/packages/oh-my-live2d/src/types/index.ts b/packages/oh-my-live2d/src/types/index.ts index 5ed305c..3228b14 100644 --- a/packages/oh-my-live2d/src/types/index.ts +++ b/packages/oh-my-live2d/src/types/index.ts @@ -32,7 +32,7 @@ export type DefaultOptions = Omit, 'parentElement' | 'mode parentElement: HTMLElement; tips: DefaultTipsOptions; statusBar: DefaultStatusBarOptions; - menus: DefaultMenusOptions | ((modelIndex?: number) => DefaultMenusOptions); + menus: DefaultMenusOptions; models: ModelOptions[]; }; diff --git a/packages/oh-my-live2d/src/types/options.ts b/packages/oh-my-live2d/src/types/options.ts index c5523b8..0764d3d 100644 --- a/packages/oh-my-live2d/src/types/options.ts +++ b/packages/oh-my-live2d/src/types/options.ts @@ -91,7 +91,7 @@ export interface Options { * 菜单配置, 详见: [菜单选项](/options/MenusOptions) * @valueType object */ - menus?: MenusOptions | ((modelIndex?: number) => MenusOptions); + menus?: MenusOptions | ((currentModel: ModelOptions, modelIndex: number) => MenusOptions); /** * 为组件提供一个父元素,如果未指定则默认挂载到 body 中 * @valueType HtmlElement diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index 3f443af..90e8681 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -52,60 +52,61 @@ const foo = async () => { disable: false, style: {} }, - // menus: (index) => { - // console.log(index); - // if (index === 0) { - // console.log('ssssssssssssssssssssssssssss'); - // return { - // disable: false, - // style: {}, - // items: (defaultItems) => { - // return defaultItems; - // } - // }; - // } else { - // return { - // style: { - // left: 0 - // }, - // items: (defaultItem) => { - // return [defaultItem[1]]; - // } - // }; - // } - // } - menus: { - items: (defaultItems) => { - return defaultItems; - // console.log(oml2d.modelIndex); - // if (oml2d.modelIndex === 0) { - // return [ - // defaultItems[1], - // { - // id: 'github', - // icon: 'github-fill', - // title: '我的github', - // onClick() { - // window.open('https://github.com/hacxy'); - // } - // } - // ]; - // } else { - // return defaultItems; - // } + menus: (currentModel, index) => { + console.log(currentModel); + console.log(index); + if (index === 0) { + console.log('ssssssssssssssssssssssssssss'); + return { + disable: false, + style: {}, + items: (defaultItems) => { + return defaultItems; + } + }; + } else { + return { + style: { + left: 0 + }, + items: (defaultItem) => { + return [defaultItem[1]]; + } + }; } - // disable: true - // items: [ - // { - // id: 'github', - // icon: 'github-fill', - // title: '我的github', - // onClick() { - // window.open('https://github.com/hacxy'); - // } - // } - // ] } + // menus: { + // items: (defaultItems) => { + // return defaultItems; + // // console.log(oml2d.modelIndex); + // // if (oml2d.modelIndex === 0) { + // // return [ + // // defaultItems[1], + // // { + // // id: 'github', + // // icon: 'github-fill', + // // title: '我的github', + // // onClick() { + // // window.open('https://github.com/hacxy'); + // // } + // // } + // // ]; + // // } else { + // // return defaultItems; + // // } + // } + // // disable: true + // // items: [ + // // { + // // id: 'github', + // // icon: 'github-fill', + // // title: '我的github', + // // onClick() { + // // window.open('https://github.com/hacxy'); + // // } + // // } + // // ] + // } }); // console.log(oml2d);