主页 / 问题 / 907043
Accepted
Pavel8289
Asked:2020-11-16 00:48:51 +0000 UTC2020-11-16 00:48:51 +0000 UTC

Vue.js 和 Uikit 3

  • 772

在 vue + uikit 3 上搭建了一个有几个页面的站点。在移动版本中，我使用标准的 uikit off-canvas 作为菜单。问题是打开移动菜单（off-canvas）后，off-canvas并没有隐藏，而是通过点击菜单项进行到页面的过渡。

UIkit 文档说你可以用这个脚本“UIkit.offcanvas(element).hide();”关闭它 如何与 vue.js 交朋友？

编写一个插入这段代码的方法不起作用（

https://getuikit.com/docs/offcanvas#off-canvas

UPD：找到了解决方案。留在答案中

vue.js

1 个回答

  1. Best Answer

    答案已经找到了。为了关闭 offcanvas，您需要为链接添加类“uk-offcanvas-close”，然后修复 css 视图，一切正常。此解决方案适用于 UIkit + Vue.JS

    <a href="#my-id" uk-toggle></a>

<!-- This is the off-canvas -->
<div id="my-id" uk-offcanvas>
    <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <ul>
           <li><a  to="/" class="uk-offcanvas-close" >Home page</a></li>
        </ul>


    </div>
</div>
    • 1

相关问题