Question

我有一个使用video-player的自定义元素paper-dialog。

他们现在的方式，似乎有点hacky。我有一个外部按钮（它必须是我设计的外部按钮），打开它：

bob = Polymer.dom(this.root).querySelector('video-player');
bob.querySelector('paper-dialog').open()

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>

</paper-dialog>

我无法继承paper-dialog行为（iron-overlay行为，因为它与特定的paper-dialog元素无关。

因为这看起来有点hacky，有没有更好的方法呢？

Answer 1

请阅读如下：

1.最后删除

</paper-dialog>

2.paper-button组件添加

<link rel="import" href="../bower_components/paper-button/paper-button.html">

来源如下：

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/google-youtube/google-youtube.html">
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="video-player">
  <template>
    <paper-dialog>
      <div class="layout horizontal">
        <paper-button dialog-dismiss>
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </div>
      <div style="height: 100%; width: 100%">
        <google-youtube style="height: 100%;"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="5"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: "video-player"
    });
  </script>
</dom-module>

Polymer 1.0 Custom Element使用paper-dialog-更好的方法来做到这一点？

1 个答案: