Tried material-components-web Automatic initialization method provided mdc-auto-init , I felt that it would be tedious to mark each HTML tag separately, so I wrote an initialization method myself.

The idea is to write the nodes and constructors to be used in a configuration file (actually a list), and then initialize the function to traverse the configuration and complete the corresponding construction.

 // ./ components/mdcConf.ts //Remember to import the package you need first import { MDCRipple } from '@material/ripple'; import { MDCTextField } from '@material/textfield'; import { MDCTopAppBar } from '@material/top-app-bar'; //The following configuration is easy to understand const Conf = [ ['.mdc-top-app-bar', MDCTopAppBar], ['.mdc-text-field', MDCTextField], [ [ '.mdc-button', '.primary-action', ], MDCRipple ], ] export default Conf
 // ./ components/mdcInit.ts import mdcConf from "./mdcConf" const Conf = mdcConf /**  *Initialization function *Reference< https://git.io/JegHJ > */ export default function () { let components = [] for (const i of Conf) { if (typeof (i[0]) == 'string') { const component = i[0] const constructor = i[1] components.map.call(document.querySelectorAll(component), function (e: any) { return new constructor(e) }) } else if (typeof (i[0]) == 'object') { const component = i[0].join(',') const constructor = i[1] components.map.call(document.querySelectorAll(component), function (e: any) { return new constructor(e) }) } } }

Finally, call the initialization function where necessary!

 // ./ index.ts import mdcInit from "./components/mdcInit" window.onload = function () { mdcInit() }

Original article of "White Cat of Cherry Blossom Villa": MDC Auto Initialization , Please keep the source for reprinting! https://2heng.xin/2019/09/03/mdc-auto-init/

Q.E.D.

Comments

Appreciation