Korzystam z komponentu Snackbar Vuetify i wydaje się, że istnieje stała minimalna szerokość COS bez względu na to, jak krótki tekst jest, nie zmniejsza to Snackbar, rozmiar tylko wtedy, gdy tekst będzie naprawdę długi. Czy można "zmusić" Snakbar pasuje do rozmiaru mojego tekstu?

Mój kod:

<template>
  <v-snackbar v-model="show" :color="color" :timeout="timeout"  right top >
    {{ message }} 

    <v-icon v-if="color === 'success'" >fas fa-thumbs-up</v-icon> 
    <v-icon v-else >fas fa-thumbs-down</v-icon>
  </v-snackbar>
</template>

<script>
export default {
  data () {
    return {
      timeout: '3000',
      show: false,
      message: '',
      color: ''
    }
  },

  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  }
}
</script>

Znalazłem coś podobnego na stackoverflow Oto, ale działa tylko na wysokość.

0
Fiyin Akinsiku 12 luty 2021, 00:26

1 odpowiedź

Najlepsza odpowiedź

Udało mi się naprawić to za pomocą tego Komentarz, więc teraz mój kod wygląda tak:

<template>
  <v-snackbar v-model="show" :color="color" :timeout="timeout" right top >
    {{ message }} 
    <v-icon v-if="color === 'success'" >fas fa-thumbs-up</v-icon> 
    <v-icon v-else >fas fa-thumbs-down</v-icon>
  </v-snackbar>
</template>

<script>
export default {
  data () {
    return {
      timeout: '3000',
      show: false,
      message: '',
      color: ''
    }
  },

  created () {
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'snackbar/showMessage') {
        this.message = state.snackbar.content
        this.color = state.snackbar.color
        this.show = true
      }
    })
  }
}
</script>

<style scoped>    
    ::v-deep .v-snack__wrapper {
        min-width: 0px;
    }
</style>
1
Fiyin Akinsiku 11 luty 2021, 23:12