uniapp编译成app后,v-html中设置的样式不生效问题解决

v-html中的样式使用样式穿透即可生效,例如 ::v-deep .highlighted

<view class="title_task_name"
    v-html="param.taskName ? highlightedContent(item.taskName, param.taskName) : item.taskName)">
</view>
/**
             * 关键字高亮处理
             * */
            highlightedContent(content, keyword, taskProgress = 0) {
                const lowerContent = content.toLowerCase();
                const lowerKeyword = keyword.toLowerCase();
                let highlightedContent = '';
                let index = lowerContent.indexOf(lowerKeyword);
                let lastIndex = 0;
                while (index !== -1) {
                    // 将关键字前面的部分添加到结果中
                    highlightedContent += content.substring(lastIndex, index);
                    // 将关键字添加到结果中并进行高亮
                    highlightedContent += '<text class="highlighted">' + content.substring(index, index + keyword.length) +
                        '</text>';
                    lastIndex = index + keyword.length;
                    index = lowerContent.indexOf(lowerKeyword, lastIndex);
                }
                //小于11个字时都能展示全,否则10个字+省略号+进度百分比
                let str = `(${taskProgress||0}%)`;
                if (lowerContent.length < 11) {
                    highlightedContent += content.substring(lastIndex) + str;
                } else {
                    index = lowerContent.indexOf(lowerKeyword);
                    if (lastIndex < 10) {
                        //搜索字段结尾索引小于10,所有高亮可以展示
                        highlightedContent += content.substring(lastIndex, 10) + '...' + str
                    } else if (index >= 10) {
                        //搜索字段开始索引大于10,所有高亮不展示
                        highlightedContent = content.substring(0, 10) + '...' + str;
                    } else {
                        //搜索字段其实位置小于10,结束位置大于10,显示部分高亮字段
                        highlightedContent = content.substring(0, index) + '<text class="highlighted">' + content
                            .substring(index, 10) +
                            '</text>'
                        highlightedContent += '...' + str
                    }
                }
                console.warn(highlightedContent)
                return highlightedContent;
            },
    .title_task_name {
        //line-height: 32rpx;
        color: #262F40;
        font-weight: bold;
        size: 32rpx;
        text-align: left;
        ::v-deep .highlighted {
            color: #3164F6;
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。