search

michitaro / vue-menu

Menu/Contextmenu Component for vue2
https://michitaro.github.io/vue-menu/
MIT License
263 stars 26 forks source link

vue-menu does not work on vue-electron #5

Closed simdax closed 5 years ago

simdax commented 6 years ago

Hello

I'm using the window component, found it great, and trying using this one. I'm trying to compile the simple example of the main page, with hsc-menu-bar/item Unfortunatly, i got errors, like unfound components. I'm working with an electron-vue template, and installing the plugin as usual import * as VueMenu from '@hscmap/vue-menu' and Vue.use(VueMenu) I have to use them all ?

[Vue warn]: Injection "menubar" not found

found in

---> <MenubaritemType> at src/menubaritem/index.vue
       <HscMenuStyleWhite>
         <MyMenu> at src/renderer/components/menu.vue
           <Mainview> at src/renderer/components/MainView.vue
             <Testclaudio> at src/renderer/App.vue
               <Root>
warn @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:576
resolveInject @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:3649
initInjections @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:3598
Vue._init @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:4555
MenubaritemType @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:4726
createComponentInstanceForVnode @ vue.esm.js?efeb:4242
init @ vue.esm.js?efeb:4059
createComponent @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:5510
createElm @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:5458
createChildren @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:5584
createElm @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:5486
patch @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:5993
Vue._update @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:2635
updateComponent @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:2763
get @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:3113
Watcher @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:3102
mountComponent @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:2770
Vue$3.$mount @ /Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:7893
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
createChildren @ vue.esm.js?efeb:5586
createElm @ vue.esm.js?efeb:5488
patch @ vue.esm.js?efeb:5995
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
init @ vue.esm.js?efeb:4065
createComponent @ vue.esm.js?efeb:5512
createElm @ vue.esm.js?efeb:5460
patch @ vue.esm.js?efeb:6034
Vue._update @ vue.esm.js?efeb:2637
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
Watcher @ vue.esm.js?efeb:3104
mountComponent @ vue.esm.js?efeb:2772
Vue$3.$mount @ vue.esm.js?efeb:8429
Vue$3.$mount @ vue.esm.js?efeb:10790
(anonymous) @ main.js?3b76:23
(anonymous) @ renderer.js:908
__webpack_require__ @ renderer.js:680
fn @ renderer.js:90
(anonymous) @ renderer.js:825
__webpack_require__ @ renderer.js:680
(anonymous) @ renderer.js:726
(anonymous) @ renderer.js:729
4/Users/scornaz/audioClaudio/node_modules/vue/dist/vue.runtime.common.js:576 [Vue warn]: Injection "parentMenu" not found

found in

---> <MenuitemType> at src/menuitem/index.vue
       <HscMenuStyleWhite>
         <MyMenu> at src/renderer/components/menu.vue
           <Mainview> at src/renderer/components/MainView.vue
             <Testclaudio> at src/renderer/App.vue
               <Root>
michitaro commented 6 years ago

"hsc-menu-bar-item" must be in "hsc-menu-bar" like this

michitaro commented 6 years ago

Doesn't it work? I mean OK:

    <hsc-menu-style-white>
        <hsc-menu-bar style="border-radius: 0 0 4pt 0;">
            <hsc-menu-bar-item label="File">
        </hsc-menu-bar>
    </hsc-menu-style-white>

NG:

    <hsc-menu-style-white>
        <hsc-menu-bar-item label="File">
    </hsc-menu-style-white>
simdax commented 6 years ago

No, it still does not work, I was using the main example

 <template>
    <hsc-menu-style-white>
        <hsc-menu-bar style="border-radius: 0 0 4pt 0;">
            <hsc-menu-bar-item label="File">
                <hsc-menu-item label="New" @click="window.alert('New')" />
                <hsc-menu-item label="Open" @click="window.alert('Open')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Save" @click="window.alert('Save')" :disabled="true" />
                <hsc-menu-item label="Export to">
                    <hsc-menu-item label="PDF" />
                    <hsc-menu-item label="HTML" />
                </hsc-menu-item>
            </hsc-menu-bar-item>
            <hsc-menu-bar-item label="Edit">
                <hsc-menu-item label="Undo" keybind="meta+z" @click="window.alert('Undo')" />
                <hsc-menu-separator/>
                <hsc-menu-item label="Cut" keybind="meta+x" @click="window.alert('Cut')" />
                <hsc-menu-item label="Copy" keybind="meta+c" @click="window.alert('Copy')" />
                <hsc-menu-item label="Paste" keybind="meta+v" @click="window.alert('Paste')" :disabled="true" />
            </hsc-menu-bar-item>
        </hsc-menu-bar>
    </hsc-menu-style-white>
</template>
michitaro commented 6 years ago

I see. The same problem occurred on my vue-electron environment too. I'll fix them.

michitaro commented 6 years ago

I was looking into the issue, but have found no solution for now. It seems that these problems are caused by differences between browser and electron-environment.

bdsoha commented 5 years ago

Any updates on this issue. I love your package and want to use it with electron

gaodeng commented 5 years ago

any news on this?

michitaro commented 5 years ago

I'm sorry that I have no idea about this.

gaodeng commented 5 years ago

@michitaro I don't no why,but add @hscmap/vue-menu to whitelist in webpack.renderer.config.js ,can workaroud this error.

let whiteListedModules = ['vue','element-ui','@hscmap/vue-menu']
bdsoha commented 5 years ago

Works like a charm

michitaro commented 5 years ago

@gaodeng Thank you very much for the suggestion! I've confirmed that your suggestion solves the problem. I've updated the README to refer your suggestion.