// ./ 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) }) } } }
// ./ index.ts import mdcInit from "./ components/mdcInit" window.onload = function () { mdcInit() }