使用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);
}
}
}