当前位置: 首页 > Web前端 > CSS

NPM酷库:类名快速组合CSS类

时间:2023-03-31 12:42:05 CSS

NPM酷库,每天两分钟了解一个流行的NPM库。在前端开发中,我们经常需要JS判断生成DOM节点CSS类,如:letclassName='btn-primary';if(active){className+='active';}return保存

;在上面的代码中,我们需要判断active变量来控制生成的按钮的CSS样式是否是active。在实际开发中,这样的样式控制逻辑可能会比较多,会干扰读取业务逻辑代码,使代码非常“脏”。classnames类名库封装了CSS样式的类操作,方便我们快速使用:constclassNames=require('classnames');//...return保存
;更多调用方式:classNames('foo','bar');//=>'foobar'classNames('foo',{bar:true});//=>'foobar'classNames({'foo-bar':true});//=>'foo-bar'classNames({'foo-bar':false});//=>''classNames({foo:true},{bar:true});//=>'foobar'classNames({foo:true,bar:true});//=>'foobar'参考https://github.com/JedWatson/。..欢迎关注公众号:梁星辰每天学一个NPM库,一年成为Node.js高手