Comme le montre l'image ci-jointe, la position du menu v est au mauvais endroit lors de l'utilisation de la propriété CSS scale.
Codepen correspondant : https://codepen.io/satishvarada/pen/YzjGNVZ
Des problèmes similaires se produiront également lors de l'utilisation du composant 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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une solution consiste à utiliser l'attribut
leftpour que le menu soit toujours à gauche.Edit-
Une autre approche consiste à attacher le menu à son élément parent à l'aide de la prop attach, afin que le composant sache à quel élément DOM il doit se détacher.
Ceci est une démo avec deux accessoires-
1. A un attribut de zoom-
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% }2. Aucun attribut de zoom -
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ items: [{ title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me' }, { title: 'Click Me 2' }, ], }), })