Vuejs2 如何使Vuetify snackbar适合文本?

Vuejs2 如何使Vuetify snackbar适合文本?,vuejs2,vuetify.js,snackbar,Vuejs2,Vuetify.js,Snackbar,我正在使用Vuetify的snackbar组件,它似乎有一个固定的最小宽度,因为无论文本有多短,它都不会减少snackbar,只有当文本变长时,大小才会改变。是否可以强制snackbar与我的文本大小匹配 我的代码: <template> <v-snackbar v-model="show" :color="color" :timeout="timeout" right top > {{ messa

我正在使用Vuetify的snackbar组件,它似乎有一个固定的最小宽度,因为无论文本有多短,它都不会减少snackbar,只有当文本变长时,大小才会改变。是否可以强制snackbar与我的文本大小匹配

我的代码:

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


我在StackOverflow上发现了类似的东西,但它只适用于高度。

我可以用这个来修复它,所以现在我的代码如下所示:

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