如何使 Vuetify 快餐栏适合文本？答案

【问题标题】：How to make Vuetify snackbar fit around text?如何使 Vuetify 快餐栏适合文本？
【发布时间】：2021-02-11 21:26:08
【问题描述】：

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

【问题讨论】：

标签： vuejs2 vuetify.js snackbar

【解决方案1】：

我可以使用 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>

【讨论】：