将 Vuetify 导航抽屉切换到 mini 然后临时 [英] Switch Vuetify navigation drawer to mini and then temporary

问题描述

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

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

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

我拥有大部分部件，但是当我单击侧边图标时出现错误.计算属性 'mini' 已分配给但没有设置器.

这是我的代码:

<v-toolbar:clipped-left="$vuetify.breakpoint.mdAndUp":app="$vuetify.breakpoint.mdAndUp":fixed="$vuetify.breakpoint.mdAndUp"平坦的固定的: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-间隔></v-间隔><v-toolbar-items class=""><v-btn icon v-for="菜单项" :key="item.icon"><v-icon>{{item.icon}}</v-icon></v-btn></v-toolbar-items></v-工具栏><v-导航抽屉剪辑:mini-variant="迷你"v-model="抽屉":permanent="$vuetify.breakpoint.mdOnly":temporary="$vuetify.breakpoint.smAndDown"应用程序隐藏覆盖><v-list密集><v-list-tilev-for="(item, index) in items":key="索引"><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

解决方案

您正在尝试为自身分配一个计算属性:

@click.stop="mini != mini"

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

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

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

所以你的 mini 变成了:

 mini() {返回 !(this.mdAndUp|| this.menuOpen);}

在此处查看.

I have a project in Vue.js and I am using Vuetify. I have a toolbar and navigation drawer. What I would like is when on desktop the drawer is open. If the user clicks the side-icon the drawer switches to mini.

If on md the drawer switches to mini. if the user clicks the side-icon the mini switches back to drawer

If on sm or lower the navigation drawer switches to temporary

I have most of the pieces but I am getting an error when I click the side-icon. Computed property 'mini' was assigned to but it has no setter.

Here is my code:

<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>

I have created a codepen with what I have so far:

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

解决方案

You're trying to assign a computed property to itself:

@click.stop="mini != mini"

You really don't want to do that. To find out why, you want to read on JS setters and getters.

If you want mini to be the computed which determines if your <navigation-drawer> is minified or not, use two separate placeholders for your info:

• one for whether the menu is forcefully opened (call it menuOpen), initially defined in data(), as false and then overwritten by your @click.stop="menuOpen != menuOpen"
• and one coming from $vuetify.breakpoint.mdAndUp. Call it mdAndUp.

So your mini becomes:

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

See it here.

这篇关于将 Vuetify 导航抽屉切换到 mini 然后临时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！