0

我正在尝试通过涟漪效应在网络上实现Material Design FAB。

我有以下虚拟 HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="bundle.css">
    </head>
    <body>
        <button class="mdc-fab" id="first" aria-label="First">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="second" aria-label="Second">
            <div class="mdc-fab__ripple"></div>
        </button>
        <button class="mdc-fab" id="third" aria-label="Third">
            <div class="mdc-fab__ripple"></div>
        </button>
        <script src="bundle.js" async></script>
    </body>
</html>

这是SCSS：

@use "@material/fab/mdc-fab";
@use "@material/fab";

这是JS：

import {MDCRipple} from '@material/ripple';
const fabRipple = new MDCRipple(document.querySelector('.mdc-fab'));

单击第一个按钮时，我可以在第一个按钮上正确显示波纹效果，但是由于某种原因，随后的任何按钮都不会出现波纹。

换句话说，涟漪效应似乎只适用于第一个元素，而不适用于它之后的元素。有谁知道我做错了什么？

4

2 回答 2

1

文档document.querySelector：

该Document方法querySelector()返回Element文档中与指定选择器或选择器组匹配的第一个。如果没有找到匹配项，null则返回。

如果要选择多个元素，请document.querySelectorAll改用。

但MDCRipple构造函数似乎只接受一个元素。因此，您可以使用循环或map将它们全部激活：

// Transform the NodeList to an Array using the ES6 spread syntax (...)
const buttons = [...document.querySelectorAll('.mdc-fab')]; 
const fabRipples = buttons.map(btn => new MDCRipple(btn)); // An Array of Ripple objects
于 2020-07-23T22:04:20.893 回答
1

知道了！我想这也有助于阅读文档。‍♂️</p> 

const fabRipple = [].map.call(document.querySelectorAll('.mdc-fab'), function(el) {
    return new MDCRipple(el);
});
于 2020-07-23T23:54:14.730 回答