时间戳

首页 > 解决方案 > 将剪裁道具应用到的正确方法在 Vuetify 中

vue.js - 将剪裁道具应用到的正确方法在 Vuetify 中

问题描述

<v-navigation-draw/>不确定在 vuetify 应用程序中应用剪裁道具以强制导航抽屉位于应用栏下方的正确方法。我试过的。

创建了一个新项目：

$ vue create mylayout
$ cd mylayout
$ vue add vuetify

Baseline将预制布局 ( https://vuetifyjs.com/en/getting-started/pre-made-layouts/ )剪切并粘贴到src/App.vue

编辑<v-navigation-drawer/>

<v-navigation-drawer
      v-model="drawer"
      app
      clipped         <--- added this prop
>

编辑<v-app-bar/>

<v-app-bar
  app
  color="indigo"
  dark
  clipped-left        <--- added this prop
>

在 FireFox 75.0 中查看，然后单击应用程序栏汉堡图标，导航抽屉“弹出”应用程序栏。我已经把文档和样本倾注了好几个小时，没有任何乐趣。我知道我错过了一些东西，但它正在逃避我。

标签： vue.jsmaterial-designvuetify.js

解决方案

我已经修复了导航剪辑问题以及它如何与其他属性交互，只需添加几行。

基本问题是，如果不将“永久”道具应用到 v-navigation-drawer，则被剪裁的道具不起作用。

所以......只需添加“永久”道具即可解决问题。然而：

如果您希望它像不需要应用永久道具一样被动地隐藏怎么办？在 v-navigation-drawer 上使用 v-if，其字段与在 v-model 道具上使用的字段相同，然后将整个内容包装在 v-expand-x-transition 中。

例子：

<v-expand-x-transition appear>
    <v-navigation-drawer>
        v-if="drawer"
        v-model="drawer"
        app
        clipped
        permanent
    >
</v-expand-x-transition>

编辑：为了使过渡在第一次出现时平滑，给 v-expand-x-transition 'appear' 属性

推荐阅读