电子vue应用程序内的vue-material mdAutocomplete - 设置问题答案

【问题标题】：vue-material mdAutocomplete inside electron-vue app - setup problems电子vue应用程序内的vue-material mdAutocomplete - 设置问题
【发布时间】：2020-09-18 05:43:58
【问题描述】：

我正在尝试使用 electron-vue 种子应用程序并将电子升级到 8 并将 vue 升级到最新版本。我正在我的 src/renderer/router/index.js 中安装 vue-material 组件：

import Vue from 'vue'
import Router from 'vue-router'
import { MdButton, MdContent, MdTabs, MdAutocomplete } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)
Vue.use(MdAutocomplete)

然后我有src/renderer/App.vue 和

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'pdq-app'
  }
</script>

<style>

  @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&display=swap|Roboto:400,500,700,400italic|Material+Icons');

  html {
    font-family: 'Source Code Pro', monospace;
  }

</style>

我正在使用 Command.vue 组件在 CommandLine.vue 模板上绘制自动完成功能：

<template>
  <main>
    <main-menu></main-menu>
    <command></command>
  </main>
</template>

<script>
  import MainMenu from './MainMenu'
  import Command from './CommandLine/Command'

  export default {
    name: 'command-line',
    components: { MainMenu, Command },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      }
    }
  }
</script>

<style>

</style>

自动完成组件是这样的：

<template>
  <div>
    <md-autocomplete v-model="selectedCountry" :md-options="countries">
      <label>Country</label>
    </md-autocomplete>

    <md-autocomplete v-model="selectedEmployee" :md-options="employees" md-dense>
      <label>Employees</label>
    </md-autocomplete>
  </div>
</template>

<script>
  export default {
    name: 'AutocompleteStatic',
    data: () => ({
      selectedCountry: null,
      selectedEmployee: null,
      countries: [
        'Algeria',
        'Argentina',
        'Brazil',
        'Canada',
        'Italy',
        'Japan',
        'United Kingdom',
        'United States'
      ],
      employees: [
        'Jim Halpert',
        'Dwight Schrute',
        'Michael Scott',
        'Pam Beesly',
        'Angela Martin',
        'Kelly Kapoor',
        'Ryan Howard',
        'Kevin Malone',
        'Creed Bratton',
        'Oscar Nunez',
        'Toby Flenderson',
        'Stanley Hudson',
        'Meredith Palmer',
        'Phyllis Lapin-Vance'
      ]
    })
  }
</script>

问题是我不确定显示输入控件缺少什么 - 它呈现不可见。呈现的 HTML 中存在 md-input 标记，但似乎我缺少一些绘制内容的依赖项：

绘制完整的自动完成功能我缺少什么？

【问题讨论】：

标签： vue-material md-autocomplete electron-vue

【解决方案1】：

看来我需要添加一些依赖项：MdField、MdMenu 和 MdList。在文档中很难看到这一点；我想如果我导入整个 VueMaterial 就不会有问题了。

import Vue from 'vue'
import Router from 'vue-router'
import {
  MdButton,
  MdCard,
  MdContent,
  MdTabs,
  MdAutocomplete,
  MdField,
  MdMenu,
  MdList
} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css'

Vue.use(Router)
Vue.use(MdAutocomplete)
Vue.use(MdField)
Vue.use(MdMenu)
Vue.use(MdList)
Vue.use(MdButton)
Vue.use(MdCard)
Vue.use(MdContent)
Vue.use(MdTabs)

// export default new Router({
// ...

【讨论】：