js中classNames的使用

作用：

                     将属性的名字连接在一起，

例子：

const btn = classNames({a: 1,b: 1,c: 1,d: 1,e: 1,f: 0, // 这里的值为非零才会输出，要是为0不会输出。
})console.log(btn) //a b c d e  

安装：

Install with npm, Bower, or Yarn:npm:npm install classnames --save
Bower:bower install classnames --save
Yarn (note that yarn add automatically saves the package to the dependencies in package.json):yarn add classnames

参考地址：

         https://github.com/JedWatson/classnames

         https://github.com/alibaba-fusion/next/blob/master/README.zh-cn.md

使用:

//hasOwnProperty方法接受一个字符串作为参数，返回一个布尔值，表示该实例对象自身是否具有该属性。
var hasOwn = {}.hasOwnProperty;function classNames () {  //源码var classes = [];for (var i = 0; i < arguments.length; i++) {// console.log(arguments[i])var arg = arguments[i]; //获取第一个 arguments的值// console.log(arg)if (!arg) continue;var argType = typeof arg;if (argType === 'string' || argType === 'number') {classes.push(arg);} else if (Array.isArray(arg) && arg.length) {var inner = classNames.apply(null, arg);if (inner) {classes.push(inner);}} else if (argType === 'object') {for (var key in arg) {if (hasOwn.call(arg, key) && arg[key]) {classes.push(key);}}}}return classes.join(' ');
}if (typeof module !== 'undefined' && module.exports) { //全局访问判断classNames.default = classNames;module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {// register as 'classnames', consistent with npm package namedefine('classnames', [], function () {return classNames;});
} else {window.classNames = classNames;
}const btn = classNames({a: 1,b: 1,c: 1,d: 1,e: 1,f: 0,
})console.log(btn)var btnClass = classNames('btn', 'aa', {'btn-pressed': 0,'btn-over': 0
});// console.log(btnClass)var prefix = 'lg';
var size = 123;
var type = 'sm';
var text = 'content'
var warning = false;
var loading = true
var ghost = false
var ghostType = 1
var className = 'btn'const btnCls = classNames({[`${prefix}btn`]: true,  //key:value   value为true才会输出[`${prefix}${size}`]: size,[`${prefix}btn-${type}`]: type && !ghost,[`${prefix}btn-text`]: text,[`${prefix}btn-warning`]: warning,[`${prefix}btn-loading`]: loading,[`${prefix}btn-ghost`]: ghost,[`${prefix}btn-${ghostType}`]: ghost,[className]: className
});console.log(btnCls) //lgbtn lg123 lgbtn-sm lgbtn-text lgbtn-loading btn

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！