如附图所示,使用缩放 CSS 属性时,v 菜单位置位于错误的位置。
对应的codepen:https://codepen.io/satishvarada/pen/YzjGNVZ
使用 v-autocomplete 组件时也会出现类似问题。
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ items: [{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }, ], }), })
html { zoom: 40% }
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet"/> <script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script> <div id="app"> <v-app id="inspire"> <div class="text-center"> <v-menu offset-y> <template v-slot:activator="{ on, attrs }"> <v-btn color="primary" dark v-bind="attrs" v-on="on" > Dropdown </v-btn> </template> <v-list> <v-list-item v-for="(item, index) in items" :key="index"> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item> </v-list> </v-menu> </div> </v-app> </div>
一种方法是使用
left
属性,因此菜单将始终位于左侧。编辑-
另一种方法是使用 attach 将菜单附加到其父元素a> prop,这样组件就会知道它应该分离到哪个 DOM 元素。
这是带有两个道具的演示-
1。具有缩放属性-
2。没有缩放属性-