2

我想在 Vaadin 10 中创建一个可重用的对话框。因此我想到了在 vaadin-dialog 中使用标签。我创建了一个包含模板化 vaadin-dialog 的 html 文件。

<dom-module id="show-sera-dialog">
<template>
    <vaadin-dialog opened="opened">
        <sera-field></sera-field>
        <slot></slot>
    </vaadin-dialog>
<template>
</dom-module>

我试着像这样使用它。

<show-sera-dialog opened="{{showSera}}">
        It worked!
</show-sera-dialog>

将打开对话框并显示血清字段，但从不显示文本。这些行有错误吗？我是否以错误的方式使用 vaadin-dialog？

PS：

它与这个按钮一起工作：

<dom-module id="one-shot-button">
<template>
    <vaadin-button on-click="_disable" theme="raised primary" disabled={{disabled}}>
        <slot></slot>
    </vaadin-button>
</template>

<script>
    class OneShotButton extends I18nMixin(Polymer.Element) {
        static get is() {
            return 'one-shot-button'
        }

        static get properties() {
            return {
                disabled: {type: Boolean, notify: true}
            }
        }

        _disable() {
            this.disabled = true;
            this.onClick();
        }
    }

    customElements.define(OneShotButton.is, OneShotButton);
</script>

4

2 回答 2

4

您正在将 a<slot>放入<template>. 模板意味着 web 组件在渲染它时会做它需要的任何事情，例如通过创建多个实例，如网格中的单元格等。在这种情况下vaadin-dialog，将内容传送到正文，以便它逃避任何堆叠上下文。因此，它使插槽无法工作，因为它们不在同一个 DOM 层次结构中。

于 2018-08-27T12:03:13.607 回答
2

创建可重用对话框的一种方法是创建这样的组件

<dom-module id="show-sera-dialog">
    <template>
        <vaadin-dialog opened={{opened}}>
            <template>
                [[text]]
            </template>
        </vaadin-dialog>
    </template>
    <script>
        class ShowSeraDialog extends Polymer.Element {
            static get is() { return 'show-sera-dialog'; }
            static get properties() { 
                return  { 
                    "text" : String, 
                    "opened" : Boolean
                }
            }
        }

        window.customElements.define(ShowSeraDialog.is, ShowSeraDialog);
    </script>
</dom-module>

并像这样使用它

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./show-sera-dialog.html">

<dom-module id="polymer-test-app">
  <template>
    <show-sera-dialog id="dialog1" text="It worked!"></show-sera-dialog>
    <button on-click="showDialog">Show dialog</button>
  </template>

  <script>
    class PolymerTestApp extends Polymer.Element {
      static get is() { return 'polymer-test-app'; }

      showDialog() {
        this.$.dialog1.opened = true;
      }
    }

    window.customElements.define(PolymerTestApp.is, PolymerTestApp);
  </script>
</dom-module>
于 2018-08-28T07:53:18.453 回答