代码之家 › 专栏 › 技术社区 › Billal Begueradj

如何使v步进器步进始终在页面顶部可见?

nuxt nuxt.js vuetify.js vue.js javascript

Billal Begueradj · 技术社区 · 6 年前

在使用vuetify.js框架的nuxt.js应用程序中,我有一个 v-stepper 组件,当向下滚动任何页面时, 它的步骤 变得不可见(我把步进元件放在里面 页面/index.vue )。 我希望它们在顶部始终可见。

为此,我认为 V步进器 A内 v-toolbar 组件可以实现目标,但不是真的:不知道如何打开 V步进器 组件内部 布局/default.vue 把它关在里面 页面/index.vue :

<template>
  <v-app>
    <v-toolbar>
      <!-- open v-stepper here -->
      <v-stepper>
    </v-toolbar>
    <v-content>
      <nuxt /> <!-- closing v-stepper here does not work, -->
    </v-content>
  </v-app>
</template>

如何实现这一目标?(我不是要求实现,只是提示/想法/备选方案)

1 回复 | 直到 6 年前

Boussadjra Brahim 6 年前

包装您的 v-stepper 带有类似DIV的组件 <div class="sticky"><v-stepper/></div>

并将以下规则添加到您的CSS中:

  .sticky {
     position: fixed;
     top: 0;
     width: 100%;
   }

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前