search

vuejs / ui

💻 UI components for official Vue organization apps
https://vuejs.github.io/ui/
1.33k stars 91 forks source link

VueDropdown and VueButton(with v-tooltip) collides in electron-vue project #20

Open gary-dgc opened 5 years ago

gary-dgc commented 5 years ago

@Akryum thanks for give us this great ui. Here's my issue. I try to use @vue/ui in electron, but find an issue when using v-tooltip directive. In order to reproduce it I create a demo project https://github.com/gary-dgc/test-proj

It’s simple that I just put following in the App.vue, when you start the electron, you’ll find the tooltip on button doesn’t work and get error log in console.

Cases I tried: 1- But if you show App.vue in plain web vue project, it works fine. 2- If leave VueDropdown or Vuebutton only one component in App.vue, it works fine.

@vue/ui version: 0.10.5

`/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:3448 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"

found in

--->

warn @ /gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:3448 /gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:4717 TypeError: Cannot read property '$el' of undefined at VueComponent.popper-node (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:12783:48) at VueComponent.init (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:11706:34) at VueComponent.mounted (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:11656:12) at invokeWithErrorHandling (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:4683:59) at callHook (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:7042:9) at Object.insert (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:5968:9) at invokeInsertHook (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:9169:30) at Vue.patch [as __patch__] (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:9388:7) at Vue._update (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:6768:21) at Vue.updateComponent (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:6889:12)`
gary-dgc commented 5 years ago

not figure out the root reason, but just find the work-around to fix it.

import Vue from 'vue' import VTooltip from 'v-tooltip' Vue.use(VueUi) Vue.use(VTooltip) // the sequence is IMPROTANT, it must behind VueUi

Now seems every thing works well

Akryum commented 5 years ago

@vue/ui already installs v-tooltip, so you just need:

import Vue from 'vue'
import VueUI from '@vue/ui'
Vue.use(VueUI)