dy-admin-live/src/components/live-message/model/message-model.tsx

import { defineComponent } from "vue";
import { ElTag } from "element-plus";
// import VirtualList from 'vue-virtual-list-v3';
// import VirtualList from 'vue3-virtual-list'
import { RecycleScroller } from 'vue-virtual-scroller'
import styles from './index.module.less'
import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
import { state } from '/src/state'
import dayjs from 'dayjs';
import Empty from "/src/components/empty";

export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      messageList: [] as any[], // 回复学生列表
      loadingMessage: false, // 观看列表状态
    }
  },
  mounted() {
    this.loadingMessage = true
    event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);

    setTimeout(() => {
      this.loadingMessage = false;
    }, 2000);
  },
  beforeUnmount() {
    event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
  },
  methods: {
    onMessage(value: any) {
      if (value && value.user) {
        console.log(state.user)
        console.log(value)
        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')

        let tempObj = {
          name: value.user?.name,
          id: value.user.id,
          isSelf: false,
          content: value.content,
          sendTime
        }
        // 判断是否是主播
        if (value.user.id === state.user.id) {
          tempObj.isSelf = true
        }
        this.messageList.push(tempObj);
        this.loadingMessage = false
      }
      console.log(this.messageList)
    }
  },
  render() {
    return (
      // <RecycleScroller class="virtual-list"
      //   style="height: 185px"
      //   item-height={85}
      //   items={this.messageList}
      //   key-field="id"
      // >
      //   <div style={{ color: '#fff' }}>showInfo</div>
      // </RecycleScroller>
      //     <VirtualList class="list-dynamic scroll-touch"
      //     :data-key="'id'"
      //     :data-sources="items"
      //     :estimate-size="80"
      //     :item-class="'list-item-dynamic'"
      //     ref="virtualList"
      //   >
      //   <template #={source}>
      //       <div class="item-inner">
      //           <div class="head">
      //               <span># {{ source.index }}</span>
      //               <span>{{ source.name }}</span>
      //           </div>
      //           <div class="desc">{{ source.desc }}</div>
      //       </div>
      //   </template>
      // </VirtualList>
      // <VirtualList class={styles.itemContent}
      //   dataKey="id"
      //   dataSources={this.messageList}
      //   estimateSize="85"
      //   itemClass="'itemInfo'"
      //   ref="virtualList">
      //     <template v-slot={source}>
      //       <div style={{ color: 'red' }}>
      //         { source }
      //       </div>
      //     </template>
      // </VirtualList>

      <div style={{ minHeight: '100%', position: 'relative' }}>
        {this.messageList.length > 0 ? this.messageList.map((item : any) => (
          <div class={styles.itemContent}>
            {/* <img src="/src/assets/home/placeholder-icon.png" alt="" /> */}
            <div class={styles.itemInfo}>
              <div class={styles.itemName}>
                <p class={styles.userName}>{item.name} {item.isSelf ? <ElTag>主播</ElTag> : null}</p>
                <p class={styles.rightTime}>{ item.sendTime }</p>
              </div>
              <div class={[styles.itemText, item.isSelf ? styles.active : null]}>
                { item.content }
              </div>
            </div>
          </div>
        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员互动！" icon="noData-no-message" />}
      </div>
    )
  }
})

function source(source: any) {
  throw new Error("Function not implemented.");
}