时间戳

首页 > 解决方案 > 如何让 vuetify 小吃吧动态增长？

javascript - 如何让 vuetify 小吃吧动态增长？

问题描述

我有一个 vuetify 小吃店，我在上面显示一条消息。如果我输入长消息，我希望小吃栏能够动态调整自身。目前，snackbar 仅支持 2 行，然后它不会转到第三行，相反，如果消息太长，它会超出snackbar 的大小，因此某些消息不再可见。我怎样才能让它动态增长，以便它也有利于非常长的消息。以下是我的代码：

<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>

标签： javascriptvue.js

解决方案

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

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

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

如果您无法使用此更改宽度，请在类前附加 ::v-deep ，这会提供更多特异性。

推荐阅读