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 name
    define('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

最后

以上就是干净刺猬为你收集整理的js中classNames的使用的全部内容，希望文章能够帮你解决js中classNames的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。