如附圖所示,使用縮放 CSS 屬性時(shí),v 菜單位置位于錯(cuò)誤的位置。
對應(yīng)的codepen:https://codepen.io/satishvarada/pen/YzjGNVZ
使用 v-autocomplete 組件時(shí)也會出現(xiàn)類似問題。
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 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
屬性,因此菜單將始終位于左側(cè)。
編輯-
另一種方法是使用 attach 將菜單附加到其父元素a> prop,這樣組件就會知道它應(yīng)該分離到哪個(gè) DOM 元素。
這是帶有兩個(gè)道具的演示-
1。具有縮放屬性-
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% }
[email?protected]/dist/vuetify.min.css" rel="stylesheet"/> sssccc sssccc sssccc Using left propDropdown {{ item.title }} Using attach propDropdown {{ item.title }}
2。沒有縮放屬性-
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ items: [{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }, ], }), })
[email?protected]/dist/vuetify.min.css" rel="stylesheet"/> sssccc sssccc sssccc Using left propDropdown {{ item.title }} Using attach propDropdown {{ item.title }}