时间戳

首页 > 解决方案 > 如何使 Vuetify 快餐栏适合文本？

vuejs2 - 如何使 Vuetify 快餐栏适合文本？

问题描述

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

标签： vuejs2vuetify.jssnackbar

解决方案

我能够使用此注释修复它，所以现在我的代码如下所示：

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

推荐阅读