如何解决如何将 javascript 文件包含到 Vaadin 14 litlement 组件中
如何将 JavaScript 库文件包含到 Vaadin 14 的 LitElement 模板组件中?我想加载一个文件并在组件附加到组件层次结构时自动执行它。
解决方法
如果你想加载一个外部库并在 LitElement 中使用它,但也想在 Java 中管理它,你可以构建一个 Java 类:
@JsModule("./my-test-component.ts")
@Tag("my-test-component")
public class MyTestComponent extends Component {
public MyTestComponent() {
}
public String getTest() {
return getElement().getProperty("test");
}
public void setTest(String test) {
getElement().setProperty("test",test);
}
}
标签很重要,因为它是 JavaScript/Typescript 和 Java 之间的链接。
您可以使用 Typescript(适用于 Vaadin 14.5+)或仅使用 JavaScript 创建 LitElement:
import {css,customElement,html,LitElement,property} from 'lit-element';
@customElement('my-test-component')
export class MyTestComponent extends LitElement {
static get styles() {
return css`
:host {
display: block;
}
`;
}
@property({ attribute: true })
public test: String = "test";
/**
* Main method of the component
*
*/
render() {
return html`Test attribute ${this.test}"`;
}
}
在这种情况下,它不会对外部库执行任何操作。 下一步是阅读外部库的文档并按照说明进行操作。
,LitElement 文件是普通的 JS 模块,因此您可以使用 import
关键字导入库或方法。
import {foo} from 'library';
export class MyComponent extends LitElement {
...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。