更新记录

1.0.0（2023-05-15） 下载此版本

cus-chat

属性说明

使用示例

<cus-chat
  :message="message"
  @getMessage='sendMessage'
>
</cus-chat>

import cusChat from '@/components/cus-chat/cus-chat.vue'
export default {
  components: {
    cusChat
  },
  data() {
    return {
      message:[{
            name: '我',
            message: '进入了直播间',
            id: `id${Date.now()}`
        }],
        currentNum:0,
        curTimer:null
    }
  },
  created(){
      //获取机器人数据
        let data = [
                  {
                      "message":"机器人21",
                      "id":1516,
                      "nickname":"爱****"
                  },
                  {
                      "message":"机器人22",
                      "id":1515,
                      "nickname":"殷*****"
                  },
                  {
                      "message":"机器人23",
                      "id":1514,
                      "nickname":"冷****"
                  },
                  {
                      "message":"机器人24",
                      "id":1513,
                      "nickname":"唇***"
                  },
                  {
                      "message":"机器人25",
                      "id":1512,
                      "nickname":"小****"
                  },
                  {
                      "message":"机器人26",
                      "id":1511,
                      "nickname":"白***"
                  },
                  {
                      "message":"机器人27",
                      "id":1510,
                      "nickname":"体****"
                  },
                  {
                      "message":"机器人28",
                      "answer":"机器人38",
                      "id":1509,
                      "nickname":"犹****"
                  },
                  {
                      "message":"机器人29",
                      "id":1508,
                      "nickname":"标****"
                  }
              ],
              this.getRobootData(500,data)
  },
  methods: {
    sendMessage(val) {
        let textCons = val.value
        textCons = textCons.replace(/\s+/g, '')
        if (textCons) {
            this.addMessage('我',textCons)
        }
    },
    addMessage(name='我',text){
        this.message = this.message.concat([{
            name: name,
            message: text,
            id: `id${Date.now()}`
        }])
    },
    getRobootData(time,data){
        if(this.currentNum>=data.length){
            return
        }
        this.curTimer = setTimeout(() => {
        this.addMessage(data[this.currentNum].nickname,data[this.currentNum].message)
            this.currentNum++
            this.getRobootData(time, data)
        }, time)
    }
  },
}

效果图

平台兼容性

cus-chat

属性说明

使用示例

<cus-chat
  :message="message"
  @getMessage='sendMessage'
>
</cus-chat>

import cusChat from '@/components/cus-chat/cus-chat.vue'
export default {
  components: {
    cusChat
  },
  data() {
    return {
      message:[{
            name: '我',
            message: '进入了直播间',
            id: `id${Date.now()}`
        }],
        currentNum:0,
        curTimer:null
    }
  },
  created(){
      //获取机器人数据
        let data = [
                  {
                      "message":"机器人21",
                      "id":1516,
                      "nickname":"爱****"
                  },
                  {
                      "message":"机器人22",
                      "id":1515,
                      "nickname":"殷*****"
                  },
                  {
                      "message":"机器人23",
                      "id":1514,
                      "nickname":"冷****"
                  },
                  {
                      "message":"机器人24",
                      "id":1513,
                      "nickname":"唇***"
                  },
                  {
                      "message":"机器人25",
                      "id":1512,
                      "nickname":"小****"
                  },
                  {
                      "message":"机器人26",
                      "id":1511,
                      "nickname":"白***"
                  },
                  {
                      "message":"机器人27",
                      "id":1510,
                      "nickname":"体****"
                  },
                  {
                      "message":"机器人28",
                      "answer":"机器人38",
                      "id":1509,
                      "nickname":"犹****"
                  },
                  {
                      "message":"机器人29",
                      "id":1508,
                      "nickname":"标****"
                  }
              ],
              this.getRobootData(500,data)
  },
  methods: {
    sendMessage(val) {
        let textCons = val.value
        textCons = textCons.replace(/\s+/g, '')
        if (textCons) {
            this.addMessage('我',textCons)
        }
    },
    addMessage(name='我',text){
        this.message = this.message.concat([{
            name: name,
            message: text,
            id: `id${Date.now()}`
        }])
    },
    getRobootData(time,data){
        if(this.currentNum>=data.length){
            return
        }
        this.curTimer = setTimeout(() => {
        this.addMessage(data[this.currentNum].nickname,data[this.currentNum].message)
            this.currentNum++
            this.getRobootData(time, data)
        }, time)
    }
  },
}

效果图