Question

我正在开发一个用户登录其仪表板的应用程序。当他们登录时，左侧会出现一个侧边栏，而右侧则是主要内容。有一个汉堡图标可以切换侧栏，效果很好，但我也希望根据侧栏是打开还是关闭来更改主要内容的宽度。我希望侧栏占页面的20％，主要内容占80％。当侧栏关闭时，我希望主要内容更改为100％宽度。

当我第一次切换侧边栏菜单时，菜单关闭并且主要内容更改为100％宽度，但是当我重新打开时，它不会更改为80％。我有点卡住了，不知道为什么-对我来说很好。

<template>
    <div class="main-content" v-bind:style="{ 'width': width + '%' }">
    <div id="burger" :class="{ 'active' : isBurgerActive }" @click.prevent="toggle(); changeWidth();">
        <slot>
            <button type="button" class="burger-button">
                <span class="burger-bar burger-bar-1"></span>
                <span class="burger-bar burger-bar-2"></span>
                <span class="burger-bar burger-bar-3"></span>
            </button>                           
        </slot>
    </div> 
    </div>                 
</template>

<script> 
    import {store} from '../store.js';
    import {mutations} from '../store.js';

    export default {
        data() {
            return {
                width: 80
            }
        },
        computed: {
            isBurgerActive() {
                return store.isNavOpen
            }
        },
        methods: {
            toggle() {
                mutations.toggleNav()
            },
            changeWidth() {
                if (this.width = 80) {
                    this.width = 100;
                } else if (this.width = 100) {
                    this.width = 80;
                }
                console.log(store.isNavOpen);
                console.log(this.width);
            }
        }
    }
</script>

Answer 1

它是：

if (this.width == 80)

不是

if (this.width = 80)

与this.width == 100

相同

切换侧栏时更改主要内容的宽度

1 个答案: