uni-app rich-text 组件里面 itemclick 无法触发

uni-app rich-text 组件里面 itemclick 无法触发

开发环境 版本号 项目创建方式
Mac macos 12 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macos 12

HBuilderX类型：正式

HBuilderX版本号：3.2.15

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：模拟器

手机机型：iphone 11

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

容器

<rich-text :nodes="creatListNode(x)" :selectable="false" class="rich-text" @itemclick="test">

构造数据

creatListNode(item){  
    let name = `{  
        name: 'a',  
        attrs: {  
            class: 'name',  
            style:'color: #4e5c7f;font-size: 36rpx;line-height: 48rpx;',  
            href:'https://www.baidu.com/',  
            pseudoRef:'1222'  
        },  
        children: [  
            {  
                type: 'text',  
                text: '${item.nickname}'  
            }  
        ]  
    },`;  
    let reply = item.parentId != '0'?`{  
        name: 'span',  
        attrs: {  
            class: 'reply'  
        },  
        children: [  
            {  
                type: 'text',  
                text: '回复'  
            }  
        ]  
    },`:'';  
    let replyName = item.parentId != '0'?`{  
        name: 'a',  
        attrs: {  
            class: 'name',  
            style:'color: #4e5c7f;font-size: 36rpx;line-height: 48rpx;',  
            href:'https://www.baidu.com/',  
            pseudoRef:'1222'  
        },  
        children: [  
            {  
                type: 'text',  
                text: '${item.replyName}'  
            }  
        ]  
    },`:'';  
    let colcon = `{  
        name: 'span',  
        children: [  
            {  
                type: 'text',  
                text: '：'  
            }  
        ]  
    }`  
    let content = ''  
    let loop = []  
    let first_arr = item.jugeContnet.split(/\#[\u4E00-\u9FA5]{1,3}\;/);  
    let emotions = item.jugeContnet.match(/\#[\u4E00-\u9FA5]{1,3}\;/g);  
    first_arr.forEach(i=>{  
        if(i===''){  
            if(emotions.length){  
                loop = loop.concat(eval(`[{  
                    name: 'img',  
                    attrs:{  
                        class:'img',  
                        src:'${emotionImgSrc(emotions.shift())}',  
                        style:'width:20px;height:20px'  
                    }  
                }]`))  
            }  
        }else{  
            loop = loop.concat(eval(`[{  
                name: 'span',  
                children: [  
                    {  
                        type: 'text',  
                        text: '${i}',  
                        style:'color: #000;font-size: 36rpx;line-height: 48rpx;'  
                    }  
                ]  
            }]`))  
        }  
    })  
    console.log(eval('['+name+reply+replyName+colcon+']').concat(loop))  
    return eval('['+name+reply+replyName+colcon+']').concat(loop)  
}

更多关于uni-app rich-text 组件里面 itemclick 无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue 暂不支持此功能

更多关于uni-app rich-text 组件里面 itemclick 无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，rich-text 组件的 @itemclick 事件确实存在触发问题，这通常是由于 nvue 渲染机制与 vue 页面的差异导致的。以下是针对你问题的具体分析和解决方案：

问题分析

  1. nvue 环境限制：nvue 使用原生渲染，rich-text 在 nvue 中基于原生组件实现，事件绑定机制与 vue 页面不同
  2. 节点结构问题：你的代码中使用了 eval() 动态生成节点，可能导致事件绑定失效
  3. iOS 平台特性：iOS 模拟器上某些事件处理与真机存在差异

解决方案

方案一：使用 @click 替代 @itemclick（推荐）

<rich-text :nodes="creatListNode(x)" :selectable="false" class="rich-text" @click="handleRichTextClick">

然后在方法中通过事件对象判断点击目标：

handleRichTextClick(event) {
    // 通过 event.target 获取点击的元素信息
    console.log('点击事件触发', event)
    // 可以根据元素的 class 或其他属性判断具体点击了哪个部分
    if (event.target && event.target.className === 'name') {
        this.test(event)
    }
}

方案二：优化节点数据结构

避免使用 eval()，直接返回结构化数据：

creatListNode(item) {
    const nodes = []
    
    // 添加名称节点
    nodes.push({
        name: 'a',
        attrs: {
            class: 'name',
            style: 'color: #4e5c7f;font-size: 36rpx;line-height: 48rpx;',
            href: 'https://www.baidu.com/',
            'data-ref': '1222'  // 使用 data-* 属性替代 pseudoRef
        },
        children: [{
            type: 'text',
            text: item.nickname || ''
        }]
    })
    
    // 其他节点逻辑...
    
    return nodes
}

方案三：检查 nvue 页面配置

确保在 pages.json 中正确配置了 nvue 页面：

{
    "pages": [{
        "path": "pages/your-page",
        "style": {
            "navigationBarTitleText": "页面标题",
            "disableScroll": false,
            "app-plus": {
                "nvueStyleCompiler": "uni-app"
            }
        }
    }]
}

方案四：使用条件编译处理平台差异

// #ifdef APP-NVUE
// nvue 特定处理
handleClick() {
    // nvue 的事件处理逻辑
}
// #endif

// #ifndef APP-NVUE
// 非 nvue 处理
handleItemClick() {
    // 原有逻辑
}
// #endif
回到顶部