Question

在集成Bootstrap + Vue和Microsoft Monaco Editor时遇到问题。

问题在于，header.jsp中vs / loader.js的导入使浏览器中的UI混乱。例如，选项卡未激活/未激活，下拉菜单未下拉/丢失。

header.jsp（如下所示）：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="sprotty/sprotty.css">
<link rel="stylesheet" href="diagram.css">

<script src="js/thrift.js"></script>
<script src="js/gen/Crossflow.js"></script>
<script src="js/gen/crossflow_types.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="css/album.css" rel="stylesheet">

<script src="elkgraph.bundle.js"></script>
<script src="jquery/jquery.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- FIX: inconsistency between Microsoft Monaco Editor Loader, Bootstrap, and Vue.
                Removing vs/loader.js restores working Crossflow web behaviour but disables runtime model viewer. -->
<script src="vs/loader.js"></script>

<style>
.content-widget {
    border: 1px solid #888;
}

svg {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
}
</style>

</head>

<body>

    <header>
        <div class="collapse bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">About</h4>
                        <p class="text-muted">Crossflow is a distributed data
                            processing framework that supports opinionated and episodical
                            workers, developed in the context of the CROSSMINER H2020
                            project.</p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4">
                        <h4 class="text-white">Contact</h4>
                        <ul class="list-unstyled">
                            <li><a href="https://www.crossminer.org/" class="text-white">CROSSMINER</a></li>
                            <li><a
                                href="https://projects.eclipse.org/projects/technology.scava"
                                class="text-white">Eclipse Scava</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar-dark bg-dark box-shadow">
            <div class="container d-flex justify-content-between">
                <a href="/org.eclipse.scava.crossflow.web"
                    class="navbar-brand d-flex align-items-center"> <strong>Crossflow</strong>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarHeader" aria-controls="navbarHeader"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
    </header>

浏览器控制台日志输出（如下所示）：

Uncaught Error: Can only have one anonymous define call per script file
    at s.enqueueDefineAnonymousModule (loader.js:7)
    at o (loader.js:7)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
s.enqueueDefineAnonymousModule @ loader.js:7
o @ loader.js:7
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
loader.js:7 Uncaught Error: Can only have one anonymous define call per script file
    at s.enqueueDefineAnonymousModule (loader.js:7)
    at o (loader.js:7)
    at unpkg.com/feather-icons@4.19.0/dist/feather.min.js:1
    at unpkg.com/feather-icons@4.19.0/dist/feather.min.js:1

Result of clicking the "Results" tab (screenshot) 注意：最初，页面加载时会预先选择“高级”标签。

Drop-down menu not opening / displaying items (screenshot)

谢谢！

Boostrap + Vue和摩纳哥编辑器集成问题

0 个答案: