如附圖所示,使用縮放 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。沒有縮放屬性-