vue实现可拖动智能聊天对话框

项目中的一个需求，可以智能咨询问题（数据库写好的问题和答案，根据你输入问题的关键字调取接口，返回数据）
如图所示：

把鼠标放在红色头部区域可以拖动，不会超出当前可视区域。点击方块可以放大占满全屏，再次点击变回正常大小。点击x隐藏对话框。
把鼠标放在对话框的边上可以上下左右拖拽放大。拖拽和拖拽边框放大我是参考的这个网址里的，写的很好，有需要的话可以去看看（https://www.jb51.net/article/73157.htm）。

废话不多说，上代码。

<template>
  <div>
    <img src="../../assets/th.png" alt id="robot" @click="toTalk" style="cursor:pointer" />
    <div id="box" :style=" flag ? 'display:none':'display:block'">
      <!-- 主体 -->
      <div class="container">
        <div id="header">
          <span style="display:inline-block">名字</span>
          <p>
            <span @click="changeSize" style="font-size:22px;cursor:pointer;color:#fff;display:inline-block">🔳</span>
           	<!--这个方块是我懒得引入icon图标随便复制的，不要学我省事，因为有的浏览器可能不显示-->
            <span
              @click="yc"
              style="cursor: pointer;font-size:22px;display:inline-block;margin-left:10px;color:#fff;"
            >✖</span>
          </p>
        </div>
        <!-- 聊天内容显示区 -->
        <div class="cBox">
          <div class="contents" ref="chattingContent" id="chattingContents">
            <div v-for="(item,index) in msgs" :key="index">
              <div class="userQuestion self" v-if="item.self">
                <p class="question">{
   
   {
   
   item.content}}</p>
                <img :src="item.avatarUrl" alt class="uImg" />
              </div>
              <div class="robotAnswer other clearfix" v-else>
                <img :src="item.avatarUrl" alt class="rImg" />
                <div class="answerContent">
                  <p class="q">{
   
   {
   
   item.q}}</p>
                  <p class="a">{
   
   {
   
   item.a}}</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 用户问题输入区 -->
          <div class="userInput">
            <div class="tBox">
              <textarea
                class="ipt"
                placeholder="开始聊天"
                @keyup.enter="sendMsgs"
                v-model.trim="inputContent"
              ></textarea>
            </div>
            <vp-button type="primary" @click="sendMsgs">发 送</vp-button>
          </div>
        </div>
      </div>
      <!-- 实现拖拽对话框和拖拽边放大 -->
      <div
        id="resizeL"
        style="position:absolute;overflow:hidden;opacity:0;filter:alpha(opacity=0);top:0;width:5px;height:100%;cursor:w-resize;"
      ></div>
      <div
        id="resizeT"
        style="position:absolute;overflow:hidden;opacity:0;filter:alpha(opacity=0);width:100%;height:5px;cursor:n-resize;top:0;"
      ></div>
      <div
        id="resizeR"
        style="position:absolute;overflow:hidden;opacity:0;filter:alpha(opacity=0);top:0;width:5px;height:100%;cursor:w-resize;right:0;"
      ></div>
      <div
        id="resizeB"
        style="position:absolute;overflow:hidden;opacity:0;filter:alpha(opacity=0);width:100%;height:5px;cursor:n-resize;bottom:0;"
      ></div>
    </div>
  </div>
</template>
<script>
import {
   
    getRobotAnswer } from '@/api/smartManage';
import userImg from '../../assets/user-avatar.jpeg';
import robotImg from '../../assets/robot-avatar.jpg';
export default {
   
   
  data() {
   
   
    return {
   
   
      msgs: [], //用来存放对话
      inputContent: '',
      oContent: {
   
   },
      flag: true,
      flag2: true,
    //我定义flagflag2的初衷是为了当我点击方块放大对话框后，点击x隐藏对话框，当我再次呼出对话框时，想让对话框的大小为正常大小
    //而不是放大后的大小。如果你没有点击方块放大的需求，这部分可以不用写。
    };
  },
  mounted() {
   
   
    this.oContent = document.getElementById('chattingContents');
    setTimeout(() => {
   
   
      this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight;
    }, 0);
    function dragable(id) {
   
   
      var d = document,
        o = d.getElementById(id),
        x,
        y,
        p = 'ondrag';
      o.ondragstart = function(e) {
   
   
        e = e || event;
        x = e.clientX - o.offsetLeft;
        y = e.clientY - o.offsetTop;
        d.ondragend = function(e) {
   
   
          e = e || event;
          o.style.left = e.clientX - x + 'px';
          o.style.top = e.clientY - y + 'px';
        };
      }