vue pc自定义div聊天输入框组件

矫情吗；* 2022-09-11 14:15 567阅读 0赞

## pc自定义div聊天输入框组件 截图上传视频等逻辑处理文件，这只是个人写的逻辑，提供参考使用 ##

**这里用到el-ui和阿里图标，一些内容显示不出来可以自己去排查**

<template>
        <div class="dialogue" >
          <div>
            <div class="top_dialogue_box">
              <div class="flex">
                <div class="top_dialogue_item flex">
                  <div class="left_la">
                    分组 :
                  </div>
                  <div class="right_title">
                    伟华理财
                  </div>
                </div>
                <div class="top_dialogue_item flex">
                  <div class="left_la">
                    搜索词 :
                  </div>
                  <div class="right_title">
                    理财规划
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="top_dialogue_item flex">
                  <div class="left_la">
                    分组ID :
                  </div>
                  <div class="right_title">
                    金融财商组
                  </div>
                </div>
                <div class="top_dialogue_item flex">
                  <div class="left_la">
                    首次访问 :
                  </div>
                  <div class="right_title">
                    <el-link :underline="false" href="" type="primary">https://www.zcool.com.cn/</el-link>
                  </div>
                </div>
              </div>
            </div>
            <div ref="dialogue_main_box">
              <div class="dialogue_box" :style="{height:(base_dialogue_h-98-202)+'px'}" ref="dialogue_message">
                <chat_list :chat_list_data="chat_list_data"></chat_list>
              </div>
              <div class="stretching_lien" ref="dialogue_resize"></div>
              <div class="send_message" ref="dialogue_send">
                <div class="send_message_state">
                <span>
                   用户正在输入...
                </span>
    
                </div>
    
                <div class="input_box">
                  <send_out_input @send_input="send_input"  :sendHeight="send_height">
    
                  </send_out_input>
                </div>
              </div>
            </div>
    
          </div>
        </div>
    </template>
    
    <script>
        import Send_out_input from "./send_out_input";
        import Chat_list from "./chat_list";
        import chat_record from "../../common/js/chat_record";
        export default {
          name: "dialogue",
          props:{
            base_dialogue_h:0,//父级元素高度
          },
          data(){
            return{
              send_height:0,//消息输入框编辑框的高度
            }
          },
          components: { Chat_list, Send_out_input},
          computed:{
            //返回聊天记录列表
            chat_list_data(){
              var that=this;
              setTimeout(()=>{
                //聊天内容滚动条最低
                var dialogue_message_dom= that.$refs.dialogue_message;
                if(dialogue_message_dom){
                  dialogue_message_dom.scrollTop=dialogue_message_dom.scrollHeight ;
                }
              },100)
              return this.$store.state.current_chat_record;
            }
          },
          mounted() {
            var that=this;
            this.$nextTick(()=>{
              //高度输入框可拖动
              that.dialogue_bo_h();
            })
            //聊天内容滚动条最低
            setTimeout(()=>{
              var dialogue_message_dom= that.$refs.dialogue_message;
              if(dialogue_message_dom){
                dialogue_message_dom.scrollTop=dialogue_message_dom.scrollHeight ;
              }
            },100)
    
          },
          methods:{
            //拖动高度
            dialogue_bo_h(){
              var that=this;
              //拖动的线
              var resize = this.$refs.dialogue_resize;
              //聊天记录高度
              var dialogue_message = this.$refs.dialogue_message;
              //发送消息高度
              var dialogue_send = this.$refs.dialogue_send;
              var box =this.$refs.dialogue_main_box;
              resize.onmousedown = function (e) {
                var startY = e.clientY;
                resize.top = resize.offsetTop;
                document.onmousemove = function (e) {
                  var endY = e.clientY;
                  //拖动线的位置
                  var moveLen = resize.top + (endY - startY);
                  //容器最大高度
                  var maxT = box.clientHeight- resize.offsetHeight;
                  // console.log(maxT);
                  //聊天记录框不能小于450
                  if (moveLen < 450){
                    moveLen = 450;
                  }
                  //聊天框不能小于100
                  if ((maxT - moveLen) <100){
                    return
                  };
                  // console.log(moveLen);
                  // console.log(maxT);
                  resize.style.top = moveLen;
                  dialogue_message.style.height = moveLen + "px";
                  dialogue_send.style.height = (maxT - moveLen) + "px";
                  that.send_height=(maxT - moveLen);
                }
                document.onmouseup = function (evt) {
                  document.onmousemove = null;
                  document.onmouseup = null;
                  resize.releaseCapture && resize.releaseCapture();
                }
                resize.setCapture && resize.setCapture();
                return false;
              }
            },
            //发送消息
            send_input(data){
              var that=this;
              //获取vuex推送对象
              const websocket=this.$store.state.web_all_websocket;
    
              if(data.content){
                //发送的文本的内容
                var one_data={
                  service:that.$store.state.user_service,
                  content:data.content,//发送内容
                  cookieid:that.$store.state.current_cookie_id,
                };
                //存到本地的内容
                var window_data = {
                  service:that.$store.state.user_service,
                  contentdata: {
                    id:55,
                    content: data.content,
                  },
                  cookiedata:{
                    cookieid:this.$store.state.current_cookie_id,
                    name:that.$store.state.user_service.name,
                  }
                };
                chat_record.window_localStorage_chat_record(window_data,1);
              }
              if(websocket){
                console.log(websocket);
                websocket.send(JSON.stringify(one_data)); //将消息发送到服务端
              }
            },
          },
    
        }
    </script>
    
    <style scoped lang="scss">
        .dialogue{
          .top_dialogue_box{
            padding:3px 20px;
            background-color: #ffffff;
            .top_dialogue_item{
                width: 210px;
                font-size: 12px;
                line-height: 25px;
                .left_la{
                  width: 64px;
                  display: inline-block;
                  color: #999999;
                }
                .right_title{
                  width: 140px;
                  display: inline-block;
                  color: #333333;
                }
            }
          }
          /*修改滚动条样式*/
          .dialogue_box::-webkit-scrollbar{
            width:5px;
            height:5px;
            /**/
          }
          .dialogue_box::-webkit-scrollbar-track{
            background: rgb(239, 239, 239);
            border-radius:2px;
          }
          .dialogue_box::-webkit-scrollbar-thumb{
            background: #bfbfbf;
            border-radius:10px;
          }
          .dialogue_box::-webkit-scrollbar-thumb:hover{
            background: #cccccc;
          }
          .dialogue_box{
            background-color: #F5F8FA;
            /*padding:24px 20px;*/
            overflow-y: auto;
            width: 100%;
          }
          .send_message{
            height: 192px;
            background-color: #ffffff;
            position: relative;
            .send_message_state{
              color: #666666;
              font-size: 16px;
              line-height: 40px;
              background-color:#F0F3F5 ;
              position: absolute;
              top: -43px;
              width: 100%;
              z-index: 99;
              span{
                margin-left: 20px;
              }
            }
    
            .input_box{
              width: 100%;
              height: 100%;
            }
          }
          .stretching_lien{
            height: 3px;
            width: 100%;
            cursor: ns-resize;
          }
          .stretching_lien:hover.stretching_lien{
            background-color: #cccccc;
          }
        }
    </style>