我怀疑这与我没能正确地使用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正确地注入为一个样式标记,而且我认为我没有覆盖任何自定义样式(因为我没有!)
我缺少什么才能使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/