如何解决固定位置 vuetify 警报组件
我正在尝试在 VueJS/nuxtjs 中创建一个警报组件,它将模拟小吃店的行为(在这种情况下,固定底部位置,当我们滚动时它固定在底部,因此我们将警报视为我们正在滚动。)
出于某种原因,我找不到太多关于它的文档。我已经浏览了 vuetify 上的警报组件 API,并将其与小吃栏组件进行了比较,但似乎仍然无法弄清楚为什么它不起作用。
我已经尝试将位置更改为绝对位置并且它可以工作,但是由于某种原因而不是在页面滚动时固定在底部,它实际上固定在底部并且用户在向下滚动到页面的结尾...当我使用小吃栏组件时它工作得很好,但我喜欢警报附带的图标,因此使用该组件的原因。我将附上警报的代码及其父组件:
家长:
<div class="help-center-page max-w-none">
警报组件:
<div class="text-center">
<v-alert :dismissible="true" prominent type="error">
This is an alert.
</v-alert>
</div>
解决方法
.v-alert {
position: fixed;
left: 50%;
bottom: 50px;
transform: translate(-50%,-50%);
margin: 0 auto; // Without this the box extends the width of the page
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。