uniapp app模式 v-html渲染元素添加点击事件

跟AI大战几十回合也没能解决

app模式下不支持dom操作

最终还是通过搜索引擎来解决掉

uni-app v-html如何获取dom节点并设置点击事件

ask.dcloud.net.cn/question/13...

uniapp.dcloud.net.cn/tutorial/re...

官网关于renderjs也没有实际使用例子

写这个文章只为碰到这个问题的人能够快速搜到这个解决方法。

完整示例代码

例子为点击英语单词触发事件

js 复制代码
<template>
  <view class="content">
    <view class="container" v-html="content"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `
                  <p style="">Yang Hui was born in Longyuan, Fujian. She grew up in a small village. She lost all her fingers and feet when she was three. She was badly burnt by accident when she went out with her grandparents. She couldn't walk and she seldom went out.</p> \r 
                  <p style="">The young girl had to learn to do everything. At first she wasn't able to use chopsticks. Her parents had to teach her for a long time. Thanks to her contentong <u>will</u> to do everything by herself, she overcame those difficult times. Now she can look after herself. She also loves studying and she has finished the junior high school courses.<br> About five years ago, Yang Hui saw someone make cross-stitch(十字绣)and she decided to learn to make it herself. As you can imagine, it's very difficult to make it without fingers. Yang Hui failed so many times. But she never gave up. And through many hours of practice, now she can use her arms to make good cross-stitch works and she is faster than other people. "One had to put great efforts into what she was doing." Yang Hui said.</p> \r 
                  <p style="">Now she is 21 years old and she is in hospital in Fujian. She continues making a 1.83-meter-long cross-stitch work with arms. She has no enough money for her operations(手术). Many kind-hearted people come to visit her and call on people to raise money for her.</p> \r 
                  <p style="">As for her future, Yang Hui said, "I hope to stand up and walk one day after operations. I want to make more money by selling cross-stitch works."</p> \r 
                  <p style="">If you want to know more about Yang Hui and help her, please call 13004982348,</p> \r 
                  <p style="">                       (<i>From Fuzhou News</i>)</p>
                `
      }
    },
    onLoad() {
      // 页面加载时处理内容
      this.content = this.wrapWordsWithSpan(this.content);
      console.log(this.content);
    },
    // 页面销毁前移除事件监听器
    onUnload() {

    },

    methods: {

      wrapWordsWithSpan(htmlContent) {
        // 正则表达式,匹配英文单词并忽略HTML标签内的内容
        // const regex = /(?<=^|>|\s)([a-zA-Z]+)(?=<|\s|$)/g;
        const regex = /(?<=^|\s|>)([a-zA-Z]+)(?=[.,;:!?]|\s|<|$)/g;
        return htmlContent.replace(
          regex,
          (match) => `<span class="ceshi" data-word="${match}">${match}</span @click="printWord(match)">`
        );
      }
    }
  }
</script>

<script lang="renderjs">
  export default {
    mounted() {
      // 获取所有class为'ceshi'的元素
      const ceshiElements = document.querySelectorAll('.ceshi');

      // 为每个元素添加点击事件
      ceshiElements.forEach((element) => {
        console.log("循环", element);
        // 使用addEventListener来添加点击事件
        element.addEventListener('click', function() {
          // 在这里,'this'指向当前被点击的元素
          console.log(this.getAttribute('data-word')); // 获取并打印data-word属性的值
        });
      });
    }
  }
</script>
<style>

</style>
相关推荐
brzhang7 分钟前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang30 分钟前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
井柏然1 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
IT_陈寒2 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
井柏然2 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊3 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang3 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..3 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询3 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
Roadinforest4 小时前
水墨风鼠标效果实现
前端·javascript·vue.js