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>
相关推荐
dy171739 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂5 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip5 小时前
JavaScript二叉树相关概念
前端
attitude.x6 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java6 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体