calc-hub/ruoyi-ui/src/views/index-old2.vue

<template>
  <el-tabs stretch="true" tab-position="bottom" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane name="chat-one" class="chat-tab-one">
      <span slot="label" class="chat-span">
        <i class="el-icon-chat-square"></i>
        对话
      </span>

      <div class="chat-search">
        <el-input
          v-model="searchText"
          placeholder="搜索"
        >
          <el-button slot="append" icon="el-icon-search">搜索</el-button>
        </el-input>
      </div>

      <el-scrollbar class="chat-scrollbar"><!--:wrap-style="{ transform: 'scaleY(' + scrollbarScale + ')' }"-->
        <div class="message" v-for="(message, index) in currentChat.messages" :key="index"
             :class="{ received: message.isReceived, sent: !message.isReceived }">
          <img :src="message.avatar" alt="" class="avatar"/>
          <div class="bubble">
            <p>{{ message.content }}</p>
          </div>
        </div>
      </el-scrollbar>

      <div class="chat-input">
        <el-input v-model="newMessage" type="textarea" autosize @keyup.enter.native="sendMessage">
        </el-input>

        <el-button icon="el-icon-delete" :disabled="hasText" type="text" @click="newMessage=''"></el-button>
        <el-button round="true" :disabled="hasText" @click="sendMessage"
                   :style="{ background: hasText ? '' : 'green', color: hasText ? '' : 'white' }">发送
        </el-button>
      </div>

    </el-tab-pane>

    <el-tab-pane>
      <span slot="label" class="chat-span">
        <i class="el-icon-user-solid"></i>
        我的
      </span>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      chatList: [
        {
          id: '1',
          name: '小明',
          avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
          lastMessage: '好的，一会儿见',
          time: '14:06',
          messages: [
            {
              id: '1',
              content: '嗨，你好啊',
              isReceived: true,
              avatar: 'https://randomuser.me/api/portraits/women/11.jpg',
              time: '14:02'
            },
            {
              id: '2',
              content: '你最近怎么样啊？',
              isReceived: false,
              avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
              time: '14:03'
            },
            {
              id: '3',
              content: '我最近一直忙着工作',
              isReceived: true,
              avatar: 'https://randomuser.me/api/portraits/women/11.jpg',
              time: '14:04'
            },
            {
              id: '4',
              content: '好的，一会儿见',
              isReceived: false,
              avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
              time: '14:06'
            }
          ]
        },
        {
          id: '2',
          name: '张三',
          avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
          lastMessage: '我在开会，请稍等',
          time: '13:45',
          messages: [
            {
              id: '1',
              content: '你好啊',
              isReceived: true,
              avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
              time: '13:40'
            },
            {
              id: '2',
              content: '你最近怎么样啊？',
              isReceived: false,
              avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
              time: '13:41'
            },
            {
              id: '3',
              content: '我在开会，请稍等',
              isReceived: true,
              avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
              time: '13:45'
            }
          ]
        }
      ],
      currentChat: null,
      newMessage: '',
      searchText: '',
      activeName: 'chat-one'
    }
  },
  methods: {
    setCurrentChat(chat) {
      this.currentChat = chat;
    },
    sendMessage() {
      const message = {
        id: String(Math.random()).substr(2),
        content: this.newMessage,
        isReceived: false,
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        time: this.getCurrentTime()
      };
      this.currentChat.messages.push(message);
      this.newMessage = '';
    },
    getCurrentTime() {
      const now = new Date();
      return now.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
    /*    updateInputHeight() {
          this.$nextTick(() => {
            this.inputHeight = this.$refs.input.$el.clientHeight;
          });
        }*/
  },
  created() {
    this.currentChat = this.chatList[0];
  },
  computed: {
    filteredChatList() {
      return this.chatList.filter(chat =>
        chat.name.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
    hasText() {
      return this.newMessage == '';
    },
    /*    scrollbarScale() {
          return this.inputHeight !== 0 ? 1 / this.inputHeight : 1;
        }*/
  }
}
</script>

<style scoped>

.el-tabs {
  height: 100vh;
}

>>> .el-tabs__content {
  height: 100%;
}
/*>>> .el-tabs__header{
  position: absolute;
  bottom: 5px;
}*/

.chat-span {
  font-size: 16px;
}

.chat-tab {
  height: 93vh;
  display: flex; /*弹性盒子模型*/
  padding: 3vh 5vw;
  flex-direction: column; /*灵活的项目将垂直显示，正如一个列一样。*/
  justify-content: space-between;
}

.chat-search {
  position: absolute;
  top: 5px;
}
.chat-scrollbar {
  position: absolute;
  top: 5px;
  bottom: 5px;
}
.chat-input {
  position: absolute;
  bottom: 5px;
  display: flex;
}

>>> .el-textarea__inner {
  resize: none;
}

.avatar {
  display: block;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
}

.message {
  display: flex;
  align-items: flex-end; /*元素位于容器的结尾。*/
  margin: 20px 5px;
  flex-grow: 1;
}

.message .avatar {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 50%;
}

.message.received .bubble {
  background-color: #f1f1f1;
}

.message.sent .bubble {
  background-color: #dcf8c6;
}

.bubble {
  padding: 10px;
  border-radius: 8px;
  color: #333;
  max-width: 80%;
}

.bubble p {
  margin: 0;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
</style>