4

使用

  • 拉拉维尔 5.7
  • Buefy 0.7.3
  • Vue 2.5.17

在我的项目中，我有一个侧边栏，其中包含使用 javascript 代码向下滑动的元素 .. 在我的页面中，我有一个TabfromBuefy 现在我注意到每个页面都包含任何Vue对象 .. javascript 代码不起作用所以侧边栏元素没有像预期的那样向下或向上滑动..但它在其他页面中运行良好

show.blade.php（示例）

@section('content')
<b-tabs>
    <b-tab-item label="Pictures">
       Lorem ipsum dolor sit amet.
    </b-tab-item>

    <b-tab-item label="Music">
       Lorem <br>
       ipsum <br>
    </b-tab-item>

</b-tabs>
@endsection

@section('scripts')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            }
        });
    </script>
@endsection

侧边栏.blade

<div class="side-menu" id="admin-side-menu">
    <aside class="menu">
        <p class="menu-label">
            General
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <a href="{{route('dashboard.index')}}" class="{{Nav::isRoute('dashboard.index')}}">
                <span class="icon"><i class="fas fa-tachometer-alt m-l-5"></i></span>{{__('site.dashboard')}}
            </a>
        </ul>

        <p class="menu-label">
            Content
        </p>
        <!--./menu-label-->

        <ul class="menu-list">
            <li>
                <a href="{{route('dashboard.users.index')}}" class="{{Nav::isResource('users')}}">
                    <span class="icon"><i class="fas fa-users m-l-5"></i></span>{{__('site.users')}}
                </a>
            </li>
        </ul>

        <p class="menu-label">
            Administration
        </p>

        <ul class="menu-list">
            <li>
                <a class="has-submenu {{Nav::hasSegment(['roles', 'permissions'], 2)}}">
                    <span class="icon"><i class="fas fa-cog m-l-5"></i></span>{{__('site.roles')}} و
                    {{__('site.permissions')}}
                </a>
                <ul class="submenu">
                    <li><a href="{{route('dashboard.roles.index')}}" class="{{Nav::isResource('roles')}}">{{__('site.roles_list')}}
                        </a></li>
                    <li><a href="{{route('dashboard.permissions.index')}}" class="{{Nav::isResource('permissions')}}">{{__('site.permissions_list')}}</a></li>
                </ul>
            </li>
        </ul>

    </aside>
</div>

仪表板.js

const accordions = document.getElementsByClassName('has-submenu')
function setSubmenuStyles(submenu, maxHeight, margins) {
    submenu.style.maxHeight = maxHeight
    submenu.style.marginTop = margins
    submenu.style.marginBottom = margins
}
for (var i = 0; i < accordions.length; i++) {
    if (accordions[i].classList.contains('is-active')) {
        const submenu = accordions[i].nextElementSibling
        setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
    }

    accordions[i].onclick = function () {
        this.classList.toggle('is-active')

        const submenu = this.nextElementSibling
        if (submenu.style.maxHeight) {
            // menu is open, we need to close it now
            setSubmenuStyles(submenu, null, null)
        } else {
            // meny is close, so we need to open it
            setSubmenuStyles(submenu, submenu.scrollHeight + "px", "0.75em")
        }
    }
}

应用程序.js

window.Vue = require('vue');

import Buefy from 'buefy'
Vue.use(Buefy)
require('./dashboard')

控制台中没有错误

4

0 回答 0