如何使 Vuetify 小吃店适合文本？

问题描述

我正在使用 Vuetify 的零食栏组件，似乎无论文本多短都有一个固定的最小宽度 cos，它不会减少零食栏，只有在文本变得很长时才会改变大小。是否可以“强制”小吃栏与我的文字大小相匹配？

我的代码：

<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 here 上发现了类似的东西，但它只适用于高度。

解决方法

我可以使用此 comment 修复它，所以现在我的代码如下所示：

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