减小下拉宽度VUEJS2

Question

我有一个v导航抽屉和一个下拉菜单在里面。无论下垂是向上还是向下，我都希望它们具有相同的宽度。此刻，当我打开抽屉的时候，这个下拉子就在抽屉外面了。有谁知道如何减少下拉的宽度吗？

<v-navigation-drawer
  class="vnd"
  height="98vh"
  width="360px"
  dark
  right
  v-model="drawerSettings"
  absolute
  temporary
>
  <template>
    <v-container fluid>
      <v-select
        v-model="valuesType"
        :items="typeArray"
        label="Relationship"
        multiple
      >
        <template v-slot:prepend-item>
          <v-list-item
            ripple
            @mousedown.prevent
            @click="toggleType"
            class="test"
          >
            <v-list-item-action>
              <v-icon :color="valuesType.length > 0 ? 'indigo darken-4' : ''">
                {{ iconType }}
              </v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>
                Select All
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-divider class="mt-2"></v-divider>
        </template>
      </v-select>
    </v-container>
  </template>
</v-navigation-drawer>

Answer 1

首先，删除<v-container fluid>，因为它需要填充，然后使用attach和v-select>，它指定这个组件应该分离到哪个DOM元素

​

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    drawerSettings: true,
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    selectedItem: [],
  }),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <div id="app">
  <v-app id="inspire">
    <v-card>
      <v-navigation-drawer
        class="vnd"
        height="98vh"
        width="360px"
        dark
        right
        v-model="selectedItem"
        absolute
        temporary
        >
  
      <v-select
        v-model="selectedFruits"
        :items="items"
        label="Favorite Fruits"
        multiple
        attach
      >
      </v-select>
 
  </v-navigation-drawer>
    </v-card>
        </v-app>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

​