Question

我有一个vuetify快餐栏，并且正在其上显示一条消息。如果要输入长消息，我希望小吃栏可以动态调整自身。目前，快餐栏仅支持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">

[https://vuetifyjs.com/en/components/snackbars#api]

[https://jsfiddle.net/stdob__/bdz90kap/]

Answer 2

您甚至可以根据内容增加Snackbar的宽度，默认情况下，宽度是固定的。您可以通过选择v-snackbar的包装器类来覆盖

<style scoped>    
    .v-snack__wrapper {
        max-width: none;
    }
</style>

这将增加小吃栏的宽度。工作示例：https://codepen.io/saurabhtalreja/pen/yLJBvZm

如果您不能使用此方法更改宽度，请在课程前面附加:: v-deep，这样可以提供更多的特异性。

如何使vuetify快餐栏动态增长？

2 个答案: