zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.

Home Page:https://www.mdui.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Electron 中使用 mdui 时出现报错

hajeekn opened this issue · comments

  • 在提交 issue 之前,请搜索相关内容是否已被提出。
  • 请确保你使用的是最新版的 mdui,当前最新版为 1.0.0

这是一个(可多选)

  • bug 反馈
  • 功能建议
  • 新组件或新特性

  • 使用平台:Windows
  • 浏览器及版本:Electron(^2.0.4)
  • 在线演示:无

如何操作

请在这里详细说明你是如何操作导致的问题

我使用 npm 方式安装了 mdui
在项目的头文件(index.js)中引入了 mdui 的样式

import Vue from 'vue'
import Vuex from 'vuex'

import 'mdui/dist/css/mdui.css'
······

在项目的vue文件中引用了 mdui

<template>
  <div id="wrapper">
   ···
            <button class="alt" @click="mdui.alert('mdui的对话框')">Electron</button>
  ···
</template>
<script>
  import mdui from 'mdui'
······
</script>

参考过 https://www.mdui.org/questions/9
尝试了 Vue.prototype 和 在 webpack 中引入

    new webpack.ProvidePlugin({
        mdui: 'mdui'
    })

但我尝试在项目头文件中引入时, electron 提示
ReferenceError: Event is not defined at %PATH%\node_modules\mdui\dist\js\mdui.js:12:370 at %PATH%\node_modules\mdui\dist\js\mdui.js:12:407 at t.bubbles (E:\Deve\vue\naive\node_modules\mdui\dist\js\mdui.js:7:83) at Object.<anonymous> (E:\Deve\vue\naive\node_modules\mdui\dist\js\mdui.js:10:2) at Object.<anonymous> (E:\Deve\vue\naive\node_modules\mdui\dist\js\mdui.js:6476:3) at Module._compile (module.js:642:30) at Object.Module._extensions..js (module.js:653:10) at Module.load (module.js:561:32) at tryModuleLoad (module.js:504:12) at Function.Module._load (module.js:496:3)(路径使用%PATH%替换掉了)
也有可能是我的调用方式错了

预期结果

在electron中能够显示对话框

实际结果

在控制台中产生报错
[Vue warn]: Property or method "mdui" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
TypeError: Cannot read property 'alert' of undefined

问题解决了,在 methods 中封装函数就行