时间戳

首页 > 解决方案 > 如何使用 vanilla js 和 sass 创建可重用的按钮组件？

javascript - 如何使用 vanilla js 和 sass 创建可重用的按钮组件？

问题描述

我必须用 vanilla js 和 scss 制作一个可重用的按钮组件，但我还没有完成。有人可以解释我该怎么做吗？我是新手，所以我不知道在哪里寻找它。

更新：我必须使用 javascript 还是只能使用 HTML 和 SCSS/CSS？

标签： javascripthtmlcsssassweb-component

解决方案

有很多解决方案可以做到这一点。一个简单的解决方案是在不同子类之间的 css 和 toogle 上创建样式，然后创建一个方法或函数来返回该组件的值。

var cusButton =  (i_params )  => {
var curButton = document.createElement ('INPUT'), buttonContainer;
curButton.classList.add  (i_params.classname);
curButton.type = 'button';
curButton.value = i_params.valueButton;
//the classname has the properties that you have to create before...
buttonContainer = document.getElementById
(i_params.idButContainer);
buttonContainer.appenChild  (curButton);

}

//Then, create one object for each button and call this function to populate the DOM with the new buttons:

var propButton ={ classname : 'created-class', valueButton : 'Click here to sens', idButContainer : 'id-name-node'};

cusButton  (propButton );

推荐阅读