vue+element-ui 仿PC端微信界面（只是界面）

效果图如下：

点击顶部，通过组件可进行拖拽（我是通过dialog实现，弹出聊天窗口的，所以用下面链接的案例实现）

此处参考链接如下：

https://www.cnblogs.com/cangqinglang/p/11115365.html

具体代码如下：(只是实现了页面效果...)

<el-dialog v-dialogDrag  title="" :visible.sync="dialogTableVisible" custom-class="custom" :modal="false"

                    :show-close="false">

                    <div class="wxchatBorderLeft">

                      <el-row>

                        <div style="padding: 10px;">

                          <div style="display: inline-block;">

                            <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="input2" size="mini">

                            </el-input>

                          </div>

                          <div style="display: inline-block;">&nbsp;&nbsp;

                            <i class="el-icon-plus"></i>

                          </div>

                        </div>

                      </el-row>

                      <el-row>

                        <div>

                          <el-col :span="24">

                            <div style="display: inline-block;padding: 12px;">

                              <el-avatar shape="square" :src="squareUrl"></el-avatar>

                            </div>

                            <div style="display: inline-block;">

                              <el-col>

                                <div class="wxchatPeople">张小小</div>

                              </el-col>

                              <el-col>

                                <div class="wxchatNews">你在干什么</div>

                              </el-col>

                            </div>

                          </el-col>

                        </div>

                      </el-row>

                    </div>

                    <div class="wxchatBorderRightTop" v-dialogDrag>

                      <div style="float: right;padding: 5px;">

                        <i class="el-icon-close" style="font-size: 10px;"></i>

                      </div>

                      <div class="wxchatName">张三</div>

                      <div class="wxchatMore">

                        <i class="el-icon-more"></i>

                      </div>

                    </div>

                    <div class="wxchatBorderRightMid">

                      <div style="margin-left: 30px;margin-top: 15px;">

                        <div align="center" style="padding: 15px 0;">

                          <el-tag type="info" size="mini">12:56</el-tag>

                        </div>

                        <el-row>

                          <el-col :span="2">

                            <el-avatar shape="square" :src="squareUrl" style="width: 35px;height: 35px;"></el-avatar>

                          </el-col>

                          <el-col :span="12">

                            <div class="chatPop1">

                              <span style="line-height: 23px;">由type属性来选择tag的类型，也可以通过color属性来自定义背景色。</span>

                            </div>

                          </el-col>

                        </el-row>

                      </div>

                      <div style="margin-left: 30px;margin-top: 15px;">

                        <div align="center" style="padding: 15px 0;">

                          <el-tag type="info" size="mini">12:56</el-tag>

                        </div>

                        <el-row>

                          <el-col :span="21">

                            <div class="chatPop2">

                              <span style="line-height: 23px;">你好文本属性来选择属性来选择属性来选择属性来选择</span>

                            </div>

                          </el-col>

                          <el-col :span="2">

                            <el-avatar shape="square" :src="squareUrl" style="width: 35px;height: 35px;"></el-avatar>

                          </el-col>

                        </el-row>

                      </div>

                    </div>

                    <div class="wxchatBorderRightBottom">

                      <div>

                        <div class="wxchatIcon1">

                          <i class="el-icon-star-off"></i>

                        </div>

                        <div class="wxchatIcon2">

                          <i class="el-icon-folder-remove"></i>

                        </div>

                        <div class="wxchatIcon3">

                          <i class="el-icon-scissors"></i>

                        </div>

                        <div class="wxchatIcon4">

                          <i class="el-icon-chat-dot-round"></i>

                        </div>

                      </div>

                      <div style="margin: -2px 15px;">

                        <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="" v-model="textarea2"

                          resize="none" autofocus maxlength="500">

                        </el-input>

                      </div>

                      <div class="sendButton">

                        <el-button size="mini">发送</el-button>

                      </div>

                    </div>

</el-dialog>

样式：

<style>

 

      .el-dialog__header {

        padding: 20px 20px 10px;

      }

    

     .chatPop1 :hover {

        background-color: #FAFAFA;

      }

    

      .chatPop1 span {

        background-color: #fff;

        padding: 5px 8px;

        display: inline-block;

        border-radius: 10px;

        margin: 0px 0 10px 10px;

        position: relative;

        border: 1px solid #E3E3E3;

        max-width: 290px;

      }

    

      .chatPop1 span::after {

        content: '';

        border: 8px solid #ffffff00;

        border-right: 8px solid #fff;

        position: absolute;

        top: 8px;

        left: -16px;

      }

    

      .chatPop2 :hover {

        background-color: #2683f5;

      }

    

      .chatPop2 span {

        background-color: #2683f5;

        padding: 5px 8px;

        display: inline-block;

        border-radius: 10px;

        margin: 0px 15px 10px 10px;

        position: relative;

        border: 1px solid #E3E3E3;

        max-width: 290px;

        float: right;

        color: #fff;

      }

    

      .chatPop2 span::after {

        content: '';

        border: 8px solid #ffffff00;

        border-right: 8px solid #2683f5;

        position: absolute;

        top: 8px;

        right: -16px;

        transform: rotateY(180deg)

      }

    

      .custom {

        border: 0px solid blue;

        height: 670px;

        width: 795px;

      }

    

      .wxchatBorder {

        width: 795px;

        height: 670px;

        border: 1px solid red;

        margin-left: -20px;

        margin-top: -59.5px;

    

      }

    

      .wxchatBorderLeft {

        width: 250px;

        height: 670px;

        background-color: #eeebe9;

        // border: 1px solid gray;

        display: inline-block;

        float: left;

        margin-left: -20px;

        margin-top: -60px;

      }

    

      .wxchatPeople {

        color: #000000;

        font-size: 14px;

      }

    

      .wxchatNews {

        color: #999;

        padding-top: 5px;

        font-size: 12px;

      }

    

      .wxchatName {

        color: #000000;

        font-size: 20px;

        float: left;

        padding-left: 30px;

        padding-top: 20px;

      }

    

      .wxchatMore {

        color: #999;

        font-size: 20px;

        float: right;

        margin-right: -15px;

        padding-top: 25px;

      }

    

      .wxchatBorderRight {

        max-width: 245px;

        height: 670px;

        // background-color: #000;

        // border: 2px solid red;

        display: inline-block;

        float: right;

        margin-right: -22px;

        // margin-left: 40px;

        margin-top: -60px;

      }

    

      .wxchatBorderRightTop {

        width: 545px;

        height: 60px;

        background-color: #f5f5f5;

        border-bottom: 1px solid #e7e7e7;

        display: block;

        float: right;

        margin-right: -20px;

        margin-top: -30px;

      }

    

      .wxchatBorderRightMid {

        width: 545px;

        height: 428px;

        background-color: #f5f5f5;

        border: 2px solid deeppink;

        display: block;

        float: right;

        margin-right: -20px;

      }

    

      .wxchatBorderRightBottom {

        width: 545px;

        height: 152px;

        background-color: #fff;

        border: 1px solid #eee;

        display: block;

        float: right;

        margin-right: -20px;

      }

    

      .wxchatIcon1 {

        display: inline-block;

        padding: 8px 10px 10px 30px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon2 {

        display: inline-block;

        padding: 8px 10px 10px 20px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon3 {

        display: inline-block;

        padding: 8px 10px 10px 10px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon4 {

        display: inline-block;

        padding: 8px 10px 10px 0px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .sendButton {

        float: right;

        margin-top: 5px;

        margin-right: 28px;

      }

    

</style>

    转自https://blog.csdn.net/weixin_37632896/article/details/106138440