聚合物组件(对话框)如何对所有项目有用?

时间:2018-03-03 22:08:59

标签: javascript polymer-2.x

使用dom-if使用自定义消息触发对话框组件,例如:

parent element
    <paper-icon-button class="delete"
      icon="delete" on-tap="deleteFunction">
    </paper-icon-button>
    deleteFunction(){
       childFunction(string parameter);
    }

child element
    <dom-if if="{{dialogHelper}}">
      <template>
        <iron-overlay-backdrop opened always-on-top>
          <paper-dialog-impl class="dialog">
            <h2 style="text-align: center">Title</h2>
            <div style="margin: 0 3% 0 3%">Take [[string parameter]]<div>
            <div class="paper-dialog-buttons">
            <paper-button on-tap="dialogEvent" dialog-dismiss>Cancelar</paper-button>
           <paper-button on-tap="dialogEvent" class="red-button" dialog-confirm >
              <b>Excluir</b>
            </paper-button>
          </paper-dialog-impl>
        </iron-overlay-backdrop>
      </template>
    </dom-if>

我想做一个组件,取一个父元素的字符串来做这个对所有项目有用的组件。我知道必须在父元素上放一个监听器来监听子元素。但我不知道如何在我的子元素上显示字符串参数。

static get properties() {
    dialogHelper: {
           type: Boolean,
           value: false
         }
}
handleDelete(){
    this.set('dialogHelper', true);
  }
  dialogEvent(event){
    // Search for the element with dialog-confirm or dialog-dismiss,
    // from the root target until this (excluded).
    var path = Polymer.dom(event).path;
    for (var i = 0, l = path.indexOf(this); i < l; i++) {
      var target = path[i];
      if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') )) {
        this.set('dialogHelper', false);
        break;
      }else if(target.hasAttribute &&target.hasAttribute('dialog-confirm')) {
        this.deleteSchedule();
        this.set('dialogHelper', false);
      }
    }
  }

0 个答案:

没有答案