Question

我想在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>

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

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>

Answer 1

您正在将<slot>放在<template>内。模板意味着Web组件在呈现时会执行所需的任何操作，例如通过创建多个实例（例如网格中的单元格等）在这种情况下，vaadin-dialog会将内容传送到主体，这样它就可以避开任何堆叠上下文。因此，由于插槽不在同一DOM层次结构中，因此使插槽无法工作。

Answer 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>

Vaadin对话中的Vaadin 10插槽

2 个答案: