如何将javascript文件引入到Vaadin14组件中

Question

如何在Vaadin14的LitElement模板组件中包含JavaScript库文件？我想加载一个文件，并在组件附加到组件层次结构时自动执行它。

Answer 1

如果您想加载一个外部库并在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创建一个LitElement (适用于Vaadin 14.5+)，或者只用JavaScript：

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}"`;
    }

}

Answer 2

LitElement文件是普通的JS模块，因此可以使用import关键字导入库或方法。

import {foo} from 'library';

export class MyComponent extends LitElement {
  ...
}