代码之家 › 专栏 › 技术社区 › user3534080

Vuetify 2->3用“order”替换删除的属性app/clipped left/offset-y

vuetifyjs3 vuetify.js vuejs3 vue.js css

0

user3534080 · 技术社区 · 3 年前

我正在尝试从Vuetify/Vue 2升级->3.我不是前端开发人员,只是负责升级一些遗留代码以保持正常运行。不幸的是 migration guide 似乎假设了一定程度的基线CSS知识,并且没有提供如何修复被删除的所有内容的示例。

不幸的是,它给出的唯一建议是:

stateless , clipped , clipped-right 和 app 道具已被移除从…起 v-navigation-drawer , v-app-bar 和 v-system-bar 。中的位置标记决定外观。使用 order="number" 道具到手动影响它。

很酷,所以我知道我需要用 order 。但我不知道如何保持这种旧的行为;我找到的最接近的帮助是 this post answer ,只是说

此处提供了相关文档: https://next.vuetifyjs.com/en/features/application-layout/

布局组件的排列方式由它们在模板中的显示顺序控制,并且可以使用order道具进行调整,该道具的行为类似于CSS中的order。

不幸的是,如果你不了解CSS,那就没有太大的帮助。该应用程序布局页面似乎只有order属性的一个示例(在动态布局部分下)。

特别是,我很难弄清楚该怎么处理 应用程序 / clipped-left / offset-y 在该块中:

<template>
  <v-app>
    <v-app-bar app clipped-left dense>
      <v-app-bar-nav-icon @click.stop="mini = !mini">
        <v-icon v-if="!mini" slot="default">mdi-menu-open</v-icon>
      </v-app-bar-nav-icon>

      <v-toolbar-title>**************</v-toolbar-title>

      <v-spacer />

      <v-menu offset-y location="left bottom">

非常感谢。

(我本来是这么问的 here 有人建议我把它分成多个问题)

0 回复 | 直到 3 年前

1

Moritz Ringler 3 年前

所有这些属性都控制v2中的主应用程序布局。在v3中,系统进行了更改,应该更简单、更直接。

至于 order ,在新布局中,组件按它们在HTML中出现的顺序添加,并且每个组件都将自己定位在当前可用的空间中。因此,通过一个导航抽屉和一个应用程序栏,申报顺序决定了你得到的是哪一个:

--------------    --------------
|    bar     |    | m |  bar   |
--------------    | e |---------
| m |        |    | n |        |
| e |        | or | u |        |
| n |        |    |   |        |
| u |        |    |   |        |
--------------    --------------
bar then menu     menu then bar

如果出于某种原因,您希望以与定位不同的顺序声明组件,则可以使用 顺序 道具来改变它(我认为你不需要那个)。

这个 app 属性,它现在对于顶部布局组件是隐式的(如 v-app-bar 或 navigation-drawer )

这个 clipped-left 属性允许导航抽屉与v-app-bar重叠,因此如果显示抽屉,它不会将应用程序栏的内容推到右侧。我不确定这在v3中是否可行。

这个 offset-y 使用了v-menu的属性,因此菜单在应用程序栏下方打开,看起来像一个文件菜单,同样,不确定这在v3中是否可能。