首页 > 解决方案 > UIkit 和 NuxtJS offcanvas 在移动到页面后不会关闭

问题描述

offcanvas 移动到页面后没有关闭(移动视图)这里是错误https://gyazo.com/b40b6de844107aa2a74d9c81bf084428

我试图用本手册纠正错误,但没有帮助。https://github.com/uikit/uikit/issues/3706

组件菜单部分代码

<div id="offcanvas-flip" uk-offcanvas="flip: true; overlay: true">
                <div class="uk-offcanvas-bar">
                    <button class="uk-offcanvas-close" type="button" uk-close></button>
                    <h2>{{$t('global.offcanvas_title')}}</h2>
                    <div class="mob-menu-block">
                            <div>
                                <nuxt-link :to="getLocalizedRoute('index')" >
                                    {{ $t('global.menu.home') }}
                                </nuxt-link>
                            </div>
                            <div>
                                <nuxt-link :to="getLocalizedRoute({ name: 'portfolio' })" >
                                    {{ $t('global.menu.portfolio') }}
                                </nuxt-link>
                            </div>
                            <div>
                                <nuxt-link :to="getLocalizedRoute({ name: 'calculator' })">
                                    {{ $t('global.menu.calculator') }}
                                </nuxt-link>
                            </div>
                            <div>
                                <nuxt-link :to="getLocalizedRoute({ name: 'contact' })" >
                                    {{ $t('global.menu.contact') }}
                                </nuxt-link>
                            </div>

                    </div>


                </div>
            </div>

我包含在 nuxt.config

'@/assets/scss/main.scss'

我在 main.scss 中添加了下一个代码(https://getuikit.com/docs/sass#how-to-build

// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";


// below comes my style code
........
........
.........

测试现场项目 - http://vuejs.virtualinstinct.net/en/

标签: vuejs2uikitnuxt.js

解决方案


推荐阅读