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>