Seperti yang ditunjukkan dalam gambar yang dilampirkan, kedudukan menu v berada di tempat yang salah apabila menggunakan sifat CSS skala.
Pen kod yang sepadan: https://codepen.io/satishvarada/pen/YzjGNVZ
Masalah yang sama juga akan berlaku apabila menggunakan komponen 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>
Salah satu cara ialah menggunakan atribut
left
supaya menu akan sentiasa berada di sebelah kiri.Edit-
Pendekatan lain ialah melampirkan menu pada elemen induknya menggunakan attach prop, jadi komponen itu mengetahui elemen DOM yang mana ia harus ditanggalkan.
Ini ialah demo dengan dua prop-
1. Mempunyai atribut zum-
2. Tiada atribut zum -