Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用vanilla js和sass创建可重用的按钮组件?_Javascript_Html_Css_Sass_Web Component - Fatal编程技术网

Javascript 如何使用vanilla js和sass创建可重用的按钮组件?

Javascript 如何使用vanilla js和sass创建可重用的按钮组件?,javascript,html,css,sass,web-component,Javascript,Html,Css,Sass,Web Component,我必须用vanilla js和SCS制作一个可重用的按钮组件,但我还没有完成。有人能解释一下我怎么做吗? 我是新手,所以我不知道去哪里找 更新:我必须使用javascript还是只能使用HTML和SCSS/CSS?有很多解决方案可以做到这一点。一个简单的解决方案是在css上创建样式,并在不同的子类之间进行切换,然后创建一个方法o函数以返回该组件的值 var cusButton = (i_params ) => { var curButton = document.createEleme

我必须用vanilla js和SCS制作一个可重用的按钮组件,但我还没有完成。有人能解释一下我怎么做吗? 我是新手,所以我不知道去哪里找


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

有很多解决方案可以做到这一点。一个简单的解决方案是在css上创建样式,并在不同的子类之间进行切换,然后创建一个方法o函数以返回该组件的值

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 );

请注意,您需要编译SCSS->CSS,因为SCSS是CSS的超集,而不是它本身。和