rt-sim-training-client/src/views/trainRoom/e-chat.vue

<template>
  <!-- 聊天窗口 -->
  <div class="chat">
    <div class="chat__head">
      <div class="chat__head--title"> 会话窗口</div>
    </div>
    <div class="chat__container" :style="{height: listHeight+'px'}">
      <ul class="chat__container--list">
        <div v-for="(nor, index) in textList" :key="index" style="margin-top: 5px;">
          <li v-if="nor.self" style="position: relative">
            <div class="userName" style="position: absolute; right: 4px; top: 4px; font-size: 14px;">
              {{ nor.chatTime }} {{ nor.userName }}</div>
            <div class="news">
              <span>{{ nor.value }}</span>
            </div>
          </li>
          <li v-if="nor.other" style="position: relative">
            <div class="userName" style="position: absolute; left: 12px; top: 4px; font-size: 14px;">
              {{ nor.userName }} {{ nor.chatTime }}</div>
            <div class="answers">
              <span>{{ nor.value }}</span>
            </div>
          </li>
          <li v-if="nor.join" style="font-size: 12px; text-align: center;">{{ nor.roomTip }}</li>
        </div>
      </ul>
    </div>
    <div class="chat__footer">
      <textarea id="dope" v-model="text" class="chat__footer--text" style="width: 99%;height: 47px; border: none;outline: none;" @keyup="handleSetInputState" />
      <button class="chat__footer--send" :disabled="disabled" @click="handleSendText">{{ $t('trainRoom.sendText') }}</button>
    </div>
  </div>
</template>

<script>

export default {
    props: {
        room: {
            type: Object,
            required: true
        },
        members: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            textList: [],
            topic: '/user/topic/chatroom',
            text: '',
            recorders: null,
            stomp: null,
            speak: this.$t('trainRoom.holdAndTalk'),
            sending: false,
            background: '',
            userId: '',
            disabled:true
        };
    },
    computed: {
        listHeight() {
            return this.height - 90;
        }
    },
    methods: {
        handleSetInputState() {
            if (!this.text.trim()) {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
        },
        handleSendText() {

        }
    }
};
</script>

<style scoped lang="scss">
    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #c7c7c7;
    }

    .chat {
        border: 1px solid #ccc;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

		&__head {
			height: 30px;
			display: flex;
			align-items: center;
			background: #f0f0f0;
			border-bottom: 1px solid #ccc;
			padding: 10px;

			&--title {
				font-size: 16px;
				font-weight: bold;
			}
		}

        &__container {
            -webkit-box-flex: 1;
            overflow-y: scroll;
            padding-right: 8px;
            padding-left: 2px;
			&--list {
				list-style: none;
				margin: 0;
				padding: 10px 0;

				li {
					width: 100%;
					overflow: hidden;
					padding-top: 8px;
				}

				.news {
					max-width: 55%;
					width: auto;
					height: auto;
					background: #2683f5;
					padding: 6px 10px;
					margin-top: 15px;
					line-height: 20px;
					font-size: 14px;
					border-radius: 4px;
					position: relative;
					float: right;
					color: #fff;
					text-align: left;
				}

				.answers {
					max-width: 55%;
					width: auto;
					height: auto;
					background: #eee;
					padding: 5px 10px;
					margin-top: 15px;
					line-height: 22px;
					font-size: 14px;
					border-radius: 5px;
					margin-left: 10px;
					position: relative;
					float: left;
					text-align: left;
				}
			}
        }

        &__footer {
            width: 100%;
            height: 83px;
            border-top: 1px solid #ccc;
            position: relative;

			&--text {
				width: 99%;
				height: 75px;
				border: none;
				outline: none;
				resize: none;
				font-size: 16px;
			}

            &--send {
                width: 70px;
                height: 25px;
                background: #0188fb;
                border: 0;
                position: absolute;
                bottom: 10px;
                right: 10px;
                color: #fff;
                cursor: pointer;
                font-size: 12px;
                line-height: 25px;
                text-align: center;
                &:disabled{
                    background: #6dbcff;
                    cursor: no-drop;
                }
            }
        }
    }
</style>