【前端】自动回复点击生成新的自动回复：下发html在前端生成dom，点击调用方法

本文主要是介绍【前端】自动回复点击生成新的自动回复：下发html在前端生成dom，点击调用方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

场景

自动回复会下发内容和链接，点击链接会自动回复新的内容，像淘宝等的自动回复。
服务端下发的是html标签，如：

"<div class="link" @click="autoReply(1,2)">aaaaa</div>"

下发的内容已经写了类和方法，并传入参数。

目标：实现点击下发的链接调用对应方法，完成自动回复。

技术栈：svelte。

代码

下发的链接有link类，因此在全局写link的css样式：

 .link {color: #4ea1db;}

由于下发的链接不会经过svelte编译器，因此不会点击后自动触发方法，需要手动去调用。

直接获取链接的DOM元素，在afterUpdate生命周期（即DOM更新后）添加点击自动回复的事件。注意，在添加之前需要将之前的事件监听清空。否则会点一次触发多次。

在handleAutoReply 中获取参数，手动调用getAutoReply方法。

在销毁页面onDestroy时移除事件监听。

  afterUpdate(() => {autoLink = document.getElementsByClassName('link-style');for (let i = 0; i < autoLink.length; i++) {autoLink[i].removeEventListener('click', handleAutoReply);}// 添加点击自动回复for (let i = 0; i < autoLink.length; i++) {autoLink[i].addEventListener('click', handleAutoReply);}});//   处理下发的html中的点击事件const handleAutoReply = (event) => {const replyValue = event.target.attributes[1].value; //eg:getAutoReply(809,6)const matches = replyValue.match(/\d+/g);const id = Number(matches[0]); // 809const key = Number(matches[1]); // 6getAutoReply(id, key);};onDestroy(() => {// 移除事件监听器for (let i = 0; i < autoLink.length; i++) {autoLink[i].removeEventListener('click', handleAutoReply);}});// 调取自动回复的接口const getAutoReply = (id,key)=>{ ... }

getAutoReply 方法返回自动回复的内容，把它加到自动回复的列表中。由于是svelte，需要显式地更新列表。

$ :list =[] // 响应式的声明// getAutoReply拿到结果后
list =[...list] // 显式更新列表

HTML中，如果是下发带标签的自动回复，则：

{@html listItem.content}

这篇关于【前端】自动回复点击生成新的自动回复：下发html在前端生成dom，点击调用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---