twitter-bootstrap - 将 bootstrap.js 导入到 lit-element 组件中
问题描述
我有一个 lit-element 组件可以正确呈现引导下拉菜单,但是当单击下拉菜单时,菜单不会出现。我意识到这是一个javascript问题,但是我不清楚如何解决这个问题。我在我的 index.html 文件中导入引导包 js。我正在链接到组件中的引导 css。
在我的 index.html 文件中,我有
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
在我的 lit-element 组件的渲染中,我有
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
同样,由于一切都正确呈现,因此可以识别 css。该问题与下拉菜单的操作有关。
更新为包含每个评论请求的组件代码:
import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
// This element is connected to the Redux store.
import { store } from '../store.js';
// These are the actions needed by this element.
import { increment, decrement } from '../actions/counter.js';
import '@polymer/paper-input/paper-input.js'
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
// These are the shared styles needed by this element.
import { SharedStyles } from './shared-styles.js';
class MyComponent extends connect(store)(PageViewElement) {
static get properties() {
return {
};
}
constructor() {
super();
}
static get styles() {
return [
SharedStyles
];
}
firstUpdated(){}
render() {
return html`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section>
<form onsubmit="return false">
<div class="form-row">
<div class="form-group col-sm-4">
<div class="input-group mb-3">
<input id=“my-input“ type="text" class="form-control">
</div>
</div>
<div class="form-row">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</form>
</section>
<section>
</section>
`;
}
}
window.customElements.define('my-component', MyComponent);
任何帮助,将不胜感激。
解决方案
可悲的是,我不能只是评论..我的答案实际上还不够大,不能作为答案而不是评论。
但是您是否尝试在主 html 上添加类似 usall 的样式表,并将相应的引导类添加到 lit-element.xml 中的元素。(我只是从你的问题中复制链接,所以我不保证这些工作)
索引.html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script defer src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<your-element></your-element>
你的元素.js:
render() {
return html`
<p class="badge badge-secondary"></p>
`
希望这可以帮助...
推荐阅读
- r - 在具有 NA 值的矩阵上使用 rcorr() 时出错
- xml - 我们可以使用 XML Schema (XSD) 添加我们自己的实体(特殊字符),例如“á”和“œ”吗?
- angular - 具有三个选择字段的 Angular 9 反应性出生日期验证
- arduino - Lilygo ttgo t-beam 和 Lora 发送或接收问题
- linux - 关于postgresql配置的基本问题
- c++ - 如何防止 libserial 吞噬来自串行设备的 0x0A、0x0D 或 0x0F 等字符?
- docker - 使用 docker 中的桥接网络将服务绑定到特定接口时连接被拒绝
- r - 在 R 中使用 tidyverse 添加新列?
- django - Django:TypeError at / context 必须是字典而不是元组
- android - 使用 Textview 和 Spinner 和斜线进行布局