uniapp后端返回dom,前端监听点击

28 阅读1分钟
<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "default",
  "style": {
    // 'custom' 表示开启自定义导航栏,默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "问题咨询"
  }
}
</route>
 
<script lang="ts" setup>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
import { tabbarTabsOption } from './options'
 
// 聊天列表
// isMe 为 true 表示我发送的消息,为 false 表示客服发送的消息
const chatList = ref<any>([
  {
    id: 1,
    nodes: `
      <div>
        <div class="mb-10rpx "> 
          <a dataClick="handleListClick" > 1 </a>
        </div>
 
         <div class="mb-10rpx "> 
          <a dataClick="handleListClick" > 2 </a>
        </div>
      
         <div class="mb-10rpx "> 
          <a dataClick="handleListClick" > 3 </a>
        </div>
      
      </div>  
    `,
    isMe: false,
  },
  {
    id: 2,
    nodes: '您好',
    isMe: true,
  },
 
])
 
// 列表点击
function handleListClick(textContent: string) {
  console.log('列表点击', textContent)
}
 
function handleDynamicClick(e: any) {
  // 策略模式,根据e.target.dataset.click 进行判断
  const clickType = {
    handleListClick,
  }
 
  clickType[e.dataclick](e.innerText)
}
</script>
 
<template>
  <view class="h-screen flex flex-col overflow-hidden">
   
      <!-- 聊天 -->
      <view class="h-820rpx overflow-y-auto">
        <view
          v-for="(item, index) in chatList" :key="index" class="flex"
          :class="{ 'mb-[32rpx]': index < chatList.length - 1, 'justify-end': item.isMe }"
        >
          <view v-if="!item.isMe" class="rounded-20rpx bg-#fff p24rpx">
            <mp-html :content="item.nodes" @linktap="handleDynamicClick" />
          </view>
 
          <view
            v-if="item.isMe" class="inline-block rounded-20rpx p24rpx text-28rpx text-#fff"
            style="background: linear-gradient( 315deg, #3CBD60 0%, #60CC40 100%);"
          >
            <mp-html :content="item.nodes" @linktap="handleDynamicClick" />
          </view>
        </view>
      </view>
  </view>
</template>
 
<style lang="scss" scoped></style>