欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > 【前端】自动回复点击生成新的自动回复:下发html在前端生成dom,点击调用方法

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

2024/10/24 21:28:06 来源:https://blog.csdn.net/karshey/article/details/141899766  浏览:    关键词:【前端】自动回复点击生成新的自动回复:下发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}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com