国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用 css 縮放屬性時(shí),Vuetify v-menu 下拉列表顯示在不正確的位置
P粉983021177
P粉983021177 2024-03-19 18:55:15
0
1
978

如附圖所示,使用縮放 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>

P粉983021177
P粉983021177

全部回復(fù)(1)
P粉693126115

一種方法是使用 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 prop
{{ item.title }}
Using attach prop
{{ 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 prop
{{ item.title }}
Using attach prop
{{ item.title }}
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板