js中classNames的使用

最新推荐文章于 2024-10-15 13:55:42 发布

醉小义

最新推荐文章于 2024-10-15 13:55:42 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Fusion Design 文章标签： classnames

本文链接：https://blog.youkuaiyun.com/qq_30638831/article/details/86561389

Fusion Design 专栏收录该内容

11 篇文章

订阅专栏

本文深入解析classnames库的使用方法及原理，通过实例演示如何在前端项目中灵活运用classnames进行条件样式设置，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：

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

例子：

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