我正在尝试在侧边栏导航中使用 vuetify 菜单。我希望菜单与屏幕左侧完美对齐。相反,我得到的是菜单坚持将其放置在距屏幕边缘 12px 的位置并破坏我的对齐方式。
有没有办法禁用阴影或强制对齐?left: 12px 是直接在元素的样式上指定的,所以 CSS 没有效果。
我试过这个,但没有运气:
<v-menu offset-y nudge-left="-12" flat>
Run Code Online (Sandbox Code Playgroud)
https://codepen.io/RuttyJ/pen/BevNmy?editors=1010
有任何想法吗?
更新:取得了一些进展:https : //codepen.io/anon/pen/WBLMob
这实现了效果,但需要将全局级别的菜单轻推覆盖到 0px !important。
在 vuetify 的 v-select 组件上使用“item-disabled”道具时遇到问题。我正在尝试将其与文字选项一起使用。
这是重现问题的片段:
在这个例子中,我想禁用“Buzz”选项。
Vue.use(Vuetify)
new Vue({
el: '#app',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],
})
})Run Code Online (Sandbox Code Playgroud)
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-xl>
<v-layout wrap align-center>
<v-flex xs12 sm6 d-flex>
<v-select :items="items" :item-disabled="disabledItems" box label="Box style"></v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>Run Code Online (Sandbox Code Playgroud)
<v-select :items="items" :item-disabled="disabledItems"></v-select>
...
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],
Run Code Online (Sandbox Code Playgroud)
我确实意识到我可以像在这个例子中那样使用非文字键值对:https : //codepen.io/anon/pen/joyoaj,它会起作用。但是我宁愿不必编写包装器组件来将文字选项转换为键值来解决这个问题。
<v-select :items="items"></v-select>
... …Run Code Online (Sandbox Code Playgroud)