MDC-WEB:多个对话框

Question

我将Google材料组件用于Web，并且在"对话框"方面存在问题。

检查我的Codepen：对话框

每页有多个对话框我该怎么办？

JS：

// Find all the dialogs on the page
const dialogEls = Array.from(document.querySelectorAll('.mdc-dialog'));
dialogEls.forEach((ele) => {
  const dialog = new mdc.dialog.MDCDialog(ele);
  dialog.listen('MDCDialog:accept', function() {
    console.log('accepted');
  })
  dialog.listen('MDCDialog:cancel', function() {
    console.log('canceled');
  })
  // From here I do not know how to continue....
  // Here the selector '#dialog-login' should still be dynamic
  document.querySelector('#dialog-login').addEventListener('click', function (evt) {
    event.preventDefault(evt);
    dialog.lastFocusedTarget = evt.target;
    // This shows all dialogs, which is wrong.
    dialog.show();
  })
});

Answer 1

我已经更新了@Jodo的答案。我建议使用带有打开按钮值的对话框上的数据属性进行动态方法。

// Find all the dialogs on the page
const dialogEls = Array.from(document.querySelectorAll('.mdc-dialog'));
dialogEls.forEach((ele) => {
  const dialog = new mdc.dialog.MDCDialog(ele);
  dialog.listen('MDCDialog:accept', function() {
    console.log('accepted');
  })
  dialog.listen('MDCDialog:cancel', function() {
    console.log('canceled');
  })
  document.querySelector('#' + ele.dataset.dialog).addEventListener('click', function (evt) {
    dialog.show();
  });
});

https://codepen.io/woytam/pen/abvdzbq?editors=1010

只需将data-dialog属性添加到每个对话框中，并使用您的按钮/链接的值添加。然后，JavaScript函数将在foreach中使用ele.dataset.dialog。

Answer 2

该对话框打开两次，因为您为＃对话框创建了两个事件侦听器。其中一个打开登录对话框另一个打开交付对话框。

由于您有两个不同的对话框，因此我建议一种更静态的方式，并独立声明这两个对话：

const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
  console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
  console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
  console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
  console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
  dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
  dialogDelivery.show();
});

https://codepen.io/j-o-d-o/pen/xzqnyy?editors=1010

---

在这里，按照要求的"动态"方法，但恕我直言，这不是很容易读取，并且容易出错。

// Find all the dialogs on the page
const dialogEls = Array.from(document.querySelectorAll('.mdc-dialog'));
// First one is the Login, Second one is the Delivery
var dialogArr = [];
dialogEls.forEach((ele) => {
  const dialog = new mdc.dialog.MDCDialog(ele);
  dialog.listen('MDCDialog:accept', function() {
    console.log('accepted');
  })
  dialog.listen('MDCDialog:cancel', function() {
    console.log('canceled');
  })
  dialogArr.push(dialog);
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
  dialogArr[0].show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
  dialogArr[1].show();
});

https://codepen.io/j-o-d-o/pen/jzxmxa?editors=1010