vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的

蜂巢糖FCT

已于 2023-08-15 16:10:27 修改

阅读量357

点赞数

文章标签：前端

于 2023-07-25 12:00:01 首次发布

本文链接：https://blog.csdn.net/qq_36093530/article/details/131914849

版权

文章介绍了一种在Vue2中通过遍历DOM结构自动生成对应less类名的方法，用于实现基于DOM结构的类名自动化。代码示例展示了如何从给定的domId开始，递归遍历子节点，构建带层级的class，并过滤掉特定前缀（如ant-），以适应不同UI框架的需求。

摘要由CSDN通过智能技术生成

1.写完静态不是要写less吗，自动生成一下实现

this.getLevelClass('domId');

domId是自定义的class名称，跟根据自己的需要设置

//vue2中开发时通过template中的div等标签自动输出对应的less形式带层级的class,只显示带class的
        getLevelClass(name) {
            let dom = document.getElementById(name);
            let html = dom.innerHTML;
            let str = `.${name}{`
            console.log('html', html);
            let domLIst = dom.childNodes;
            console.log(domLIst);
            domLIst.forEach(item => {
                console.log('domLIst', item);
                str = this.getdom(item, str);
            })
            str += '}'
            console.log('str', str);

        },
        getdom(dom, str) {
            if (dom.classList && dom.classList.length) {
                str += `.${Array.from(dom.classList).join('.')}{`
                if (dom.childNodes) {
                    dom.childNodes.forEach(item => {
                        str = this.getdom(item, str);
                    })
                }
                str += `}`;
                str += `       `
                return str
            } else {
                return str;
            }
        },

查看一下效果：

<div id="domId" class="domId">

<div class="aa abc">

aa

<div class="a1">

<div class="a1-1"></div>

<div class="a1-2"></div>

</div>

<div class="a2">

<div class="a2-1"></div>

<div class="a2-2"></div>

</div>

<input />

</div>

<div class="bb">bb</div>

</div>