如何使vuetify snackbar动态增长？

Question

我有一个vuetify snackbar，我正在显示一条消息。如果我输入长信息，我希望快餐栏动态调整自己。目前，小吃店正在促进只有2行，然后它不会转到第三行，而是如果消息太长，它会超过小吃店的大小，因此一些消息不再可见。如何使其动态增长，以便它也可以促进非常长的消息。以下是我的代码：

<template>
  <div>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'center'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
      :color="'success'"
    >
      <div>{{ text }}</div>
      <v-btn
        color="white"
        flat
        @click="snackbar = false"
      >
        Close
      </v-btn>
    </v-snackbar>
  </div>
</template>

<script>
  export default {
    data: () => ({
      snackbar: true,
      y: 'top',
      x: 'right',
      mode: '',
      timeout: 6000,
      text: 'Yayy! Benutzer erfolgreich angelegt',
    }),
  };

</script>

Answer 1

使用auto-height属性：

<v-snackbar v-model="snackbar" 
    :bottom="y === 'bottom'" :left="x === 'left'" 
    :multi-line="mode === 'multi-line'" :right="x === 'center'" 
    :timeout="timeout" :top="y === 'top'" :vertical="mode === 'vertical'"
    :color="'success'" :auto-height="true">

[Qazxswpoi]

[Qazxswpoi]