uni-app 实现根据 HTML tag 层级进行染色功能

在uni-app中实现根据HTML tag层级进行染色功能，可以通过递归遍历DOM树的方式来实现。以下是一个示例代码，展示如何在uni-app中对特定层级的HTML标签进行染色。

首先，假设我们有一个简单的HTML结构如下：

<view class="container">
    <view class="level-1">
        <view class="level-2">
            <text class="level-3">Text 1</text>
        </view>
        <text class="level-2">Text 2</text>
    </view>
    <view class="level-1">
        <view class="level-2">
            <text class="level-3">Text 3</text>
        </view>
    </view>
</view>

接下来，在uni-app的页面脚本中，我们可以使用以下代码来遍历DOM树并染色：

export default {
    onLoad() {
        this.$nextTick(() => {
            this.colorizeByLevel(this.$refs.container, 1, 'red'); // 从level-1开始染色为红色
        });
    },
    methods: {
        colorizeByLevel(node, targetLevel, color) {
            if (!node) return;

            // 获取当前节点的层级（根据业务逻辑自定义）
            let currentLevel = this.getLevel(node);

            if (currentLevel === targetLevel) {
                node.style.color = color;
            }

            // 递归遍历子节点
            let children = node.children || [];
            children.forEach(child => {
                this.colorizeByLevel(child, targetLevel, color);
            });
        },
        getLevel(node) {
            // 根据节点class判断层级（示例逻辑）
            let className = node.className || '';
            let matches = className.match(/level-(\d+)/);
            return matches ? parseInt(matches[1], 10) : 0;
        }
    }
}

在模板中，我们需要给根容器添加一个ref，以便在脚本中访问它：

<template>
    <view ref="container" class="container">
        <!-- 上述HTML结构 -->
    </view>
</template>

上述代码中，colorizeByLevel方法递归遍历DOM树，通过getLevel方法判断当前节点的层级。如果当前节点的层级与目标层级匹配，则更改其文字颜色。

请注意，由于uni-app主要面向移动端，DOM操作可能不如在Web开发中那样直观。实际项目中，可能需要根据uni-app的具体特性和限制调整代码。此外，对于复杂的DOM结构或性能敏感的场景，建议进一步优化递归算法或使用虚拟DOM等策略。