我怀疑这与我没能正确地使用JS文件进行VITESIGH有关,但我没有设法钻到任何错误。在我的应用程序中,vuetify的某些css功能(如列表突出显示事件)似乎不起作用,在该应用程序中,我正尝试将vuetify与vue.js和webpack一起使用。
我试图实现的示例是default navigation drawer.
在我的实现中,悬停在列表项上不会触发背景颜色更改或光标类型更改。
我的代码:
主.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import vuetify_css from 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

应用程序.vue
<template>
  <div id="app">
    <v-app>
      <navigation></navigation>
      <v-toolbar app></v-toolbar>
      <v-content>
        <v-container fluid>
          <router-view></router-view>
        </v-container>
      </v-content>
      <v-footer app></v-footer>
    </v-app>
  </div>
</template>

<script>
import Navigation from '@/views/Navigation'

export default {
  name: 'app',
  components: {Navigation},
}
</script>

<style>
</style>

导航.js
<template>
   <v-navigation-drawer app permanent light>
    <v-toolbar flat>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">
            Application
          </v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-toolbar>
    <v-divider></v-divider>
    <v-list dense class="pt-0">
      <v-list-tile v-for="item in items" :key="item.title" >
        <v-list-tile-content>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  data () {
    return {
        items: [
          { title: 'Home', },
          { title: 'About', }
        ]
    }
  }
}
</script>

<style scoped>
</style>

奇怪的是,我可以看到整个vuetify css文件被webpack正确地注入为一个样式标记,而且我认为我没有覆盖任何自定义样式(因为我没有!)
javascript - 并非所有CSS都能在Vuetify中与Vue.js和Webpack一起运行-LMLPHP
我缺少什么才能使Vuetify样式正常工作?
(一些多余的代码被剥离,让我知道,如果你需要更多的我的项目文件/代码)

最佳答案

问题是,没有为任何鼠标事件添加处理程序。尝试只添加一个空:

<v-list dense class="pt-0">
  <v-list-tile v-for="item in items" :key="item.title" @click="">
    <v-list-tile-content>
      <v-list-tile-title>{{ item.title }}</v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>
</v-list>

关于javascript - 并非所有CSS都能在Vuetify中与Vue.js和Webpack一起运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47724764/

10-12 00:16
查看更多