将 Vuetify 导航抽屉切换到迷你，然后是临时的

Posted 2023-02-23

【中文标题】将 Vuetify 导航抽屉切换到迷你，然后是临时的

【英文标题】：Switch Vuetify navigation drawer to mini and then temporary

【发布时间】：2019-10-21 10:04:54

【问题描述】：

我在 Vue.js 中有一个项目，我正在使用 Vuetify。我有一个工具栏和导航抽屉。我想要的是在桌面上打开抽屉时。如果用户单击侧面图标，抽屉将切换到迷你。

如果在 md 上，抽屉会切换到 mini。如果用户点击侧边图标，迷你会切换回抽屉

如果打开 sm 或降低导航抽屉切换到临时

我有大部分作品，但是当我单击侧面图标时出现错误。 Computed property 'mini' was assigned to but it has no setter.

这是我的代码：

<v-toolbar 
    :clipped-left="$vuetify.breakpoint.mdAndUp"
    :app="$vuetify.breakpoint.mdAndUp"
    :fixed="$vuetify.breakpoint.mdAndUp"
    flat 
    fixed
    :scroll-toolbar-off-screen="$vuetify.breakpoint.smAndDown"
    :scroll-threshold="50">

    <v-toolbar-side-icon @click.stop="mini = !mini">
    </v-toolbar-side-icon>

    <v-toolbar-title class="text-uppercase">
        <span class="font-weight-light">LOGO</span>
    </v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="">
        <v-btn icon v-for="item in menu" :key="item.icon">
            <v-icon>item.icon</v-icon>
        </v-btn>
    </v-toolbar-items>
</v-toolbar>

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    :permanent="$vuetify.breakpoint.mdOnly"
    :temporary="$vuetify.breakpoint.smAndDown"
    app
    hide-overlay>

    <v-list dense>
        <v-list-tile
            v-for="(item, index) in items"
            :key="index"
        >
            <v-list-tile-action>
                <v-icon> item.icon </v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
                <v-list-tile-title> item.title </v-list-tile-title>
            </v-list-tile-content>
        </v-list-tile>
    </v-list>
</v-navigation-drawer>

我已经用我目前拥有的东西创建了一个代码笔：

https://codepen.io/jsd219/pen/gJJMPQ

【参考方案1】：

问题是你试图修改计算属性mini。

要改变计算属性，您需要提供computed setter：

computed: 
    mini: 
        get() 
           // get logic
        ,
        set(value) 
           // set logic
        
    

在您的情况下，如果基于 $vuetify.breakpoint.mdAndDown，您的计算属性 mini 返回 true 或 false。您需要包含一个新变量，例如 overwriteBreakpoint 并在您的设置器中使用它。

data() => (
    overwriteBreakpoint: true
),
computed: 
    mini: 
        get() 
           return this.$vuetify.breakpoint.mdAndDown || this.overwriteBreakpoint;            
        ,
        set(value) 
           this.overwriteBreakpoint = value;
        
    

这是一个例子：https://codepen.io/dormenog/pen/MddbMY?editors=1011

更新：

要使这项工作适用于多种屏幕尺寸，您需要就导航栏的每个道具何时应为true 或false 制定明确的规则。这将很快变得非常混乱，并且跟踪状态的好处并不真正有价值，因为屏幕不会在用户设备上实时改变大小。

我建议将导航栏的内容分成一个组件，并用多个 <v-navigation-drawer /> 包装它，只有在屏幕尺寸正确的情况下才会由 vue 呈现。这可以使用v-if 和v-else 来实现。

【讨论】：

我实际上只是在您发布之前添加了该内容。 :) 我不再收到错误消息，但是当我单击侧面图标时，什么也没有发生。有什么想法吗？

我不能再在侧面图标上使用：@click.stop="mini = !mini 吗？如果屏幕大小发生变化，但在点击操作上没有变化，则计算的属性会起作用

重新加载并再次检查:)。它的固定

好的，这太棒了！它几乎可以完全发挥作用。现在，当屏幕尺寸发生变化时，导航永远不会回到抽屉

【参考方案2】：

您正在尝试将计算属性分配给自身：

@click.stop="mini != mini"

你真的不想这样做。要找出原因，您需要阅读 JS setter 和 getter。

如果您希望计算 mini 来确定您的 <navigation-drawer> 是否被缩小，请为您的信息使用两个单独的占位符：

菜单是否被强制打开（称为menuOpen），最初在data()中定义为false，然后被你的@click.stop="menuOpen != menuOpen"覆盖 还有一个来自$vuetify.breakpoint.mdAndUp。叫它mdAndUp。

所以你的mini 变成：

  mini() 
    return !(this.mdAndUp|| this.menuOpen);
  

看here。

【讨论】：

这很接近。目标是在桌面上，菜单打开，侧面图标将其切换为迷你。在 md 大小的设备上，菜单切换到 mini，侧图标将其切换回打开状态，最后在 sm 和 xs 设备上，菜单关闭并转换为 temporay。单击侧面图标时，菜单打开

现在当屏幕尺寸变为 md 时，菜单不会切换到 mini。仅供参考：我在数据对象中更改了menuOpen: true,

这是简单的 javascript 逻辑，你可以自己做。我告诉过你潜在的问题是什么（你试图分配给一个吸气剂）。我是来帮助你学习的，但我不能被雇用。此外，考虑到代码的复杂程度，您的请求现在已经触手可及。恕我直言，你会从这里学到更多。如果到明天你还没有工作，我会回来帮你解决任何你觉得太有挑战性的事情。