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>
相关推荐
baiduopenmap2 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
请叫我欧皇i22 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_25 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun31 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网3 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02043 小时前
前端VUE项目启动方式
前端·javascript·vue.js