如何让 vuetify 小吃店动态增长? [英] How to make the vuetify snackbar grow dynamically?
问题描述
我有一个 vuetify 小吃店，我正在其上显示一条消息.如果我输入长消息，我希望小吃店能够动态调整自身.目前，snackbar 只是促进了 2 行，然后它不会转到第三行，相反，如果消息太长，它超过了 snackbar 的大小，因此某些消息不再可见.我怎样才能让它动态增长，以便它也促进很长的消息.以下是我的代码:
<div><v-小吃店v-model="小吃店":bottom="y === '底部'":left="x === '左'":multi-line="模式 === '多行'":right="x === '中心'":超时=超时":top="y === '顶'":vertical="模式 === '垂直'":color="'成功'"><div>{{ text }}</div><v-btn颜色=白色"平坦的@click="snackbar = false">关闭</v-btn></v-snackbar></模板><脚本>导出默认{数据:() =>({小吃店:真的，y: '顶',x: '正确',模式: ''，超时:6000，文字:'耶！Benutzer erfolgreich angelegt',}),};
使用 auto-height 属性:
[ https://vuetifyjs.com/en/components/snackbars#api ]
[ https://jsfiddle.net/stdob__/bdz90kap/ ]
I have a vuetify snackbar and I am displaying a message on it. I want the snackbar to adjust itself dynamically, if I type in a long message. At the moment the snackbar is facilitating just 2 lines and then it does not go to the third line and instead if the message is too long, it exceeds the size of the snackbar and hence some of the message is not visible anymore. How can I make it grow dynamically such that it facilitates very long messages as well. Following is my code:
<template>
<div>
<v-snackbar
v-model="snackbar"
:bottom="y === 'bottom'"
:left="x === 'left'"
:multi-line="mode === 'multi-line'"
:right="x === 'center'"
:timeout="timeout"
:top="y === 'top'"
:vertical="mode === 'vertical'"
:color="'success'"
>
<div>{{ text }}</div>
<v-btn
color="white"
flat
@click="snackbar = false"
>
Close
</v-btn>
</v-snackbar>
</div>
</template>
<script>
export default {
data: () => ({
snackbar: true,
y: 'top',
x: 'right',
mode: '',
timeout: 6000,
text: 'Yayy! Benutzer erfolgreich angelegt',
}),
};
</script>
Use the auto-height property:
<v-snackbar v-model="snackbar"
:bottom="y === 'bottom'" :left="x === 'left'"
:multi-line="mode === 'multi-line'" :right="x === 'center'"
:timeout="timeout" :top="y === 'top'" :vertical="mode === 'vertical'"
:color="'success'" :auto-height="true">
[ https://vuetifyjs.com/en/components/snackbars#api ]
[ https://jsfiddle.net/stdob__/bdz90kap/ ]
这篇关于如何让 vuetify 小吃店动态增长?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
