electron制作聊天界面(仿制qq)

LucasTwilight 發(fā)布于2019-08-23 13:41 / 1123人閱讀

摘要：將炙啖朱亥，持觴勸侯嬴。三杯吐然諾，五岳倒為輕眼花耳熱后，意氣素霓生。救趙揮金槌，邯鄲先震驚。千秋二壯士，烜赫大梁城?？v死俠骨香，不慚世上英。誰能書閣下，白首太玄經(jīng)。是唐代大詩人李白借樂府古題創(chuàng)作的一首詩。

效果圖:

樣式使用scss和flex布局

這也是制作IM系統(tǒng)的最后一個(gè)界面了!
在制作之前參考了qq和千牛

需要注意的點(diǎn)

qq將滾動(dòng)條美化了而且在無操作的情況下是不會(huì)顯示的

滾動(dòng)條美化

::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/
    width: 5px; /*高寬分別對應(yīng)橫豎滾動(dòng)條的尺寸*/
    height: 1px;
}

::-webkit-scrollbar-thumb { /*滾動(dòng)條里面小方塊*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    background: rgba(20, 20, 50, 0.6);
    position: absolute;
}

::-webkit-scrollbar-track { /*滾動(dòng)條里面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
    border-radius: 10px;
    background: #EDEDED;
    position: absolute;
}

滾動(dòng)條根據(jù)時(shí)機(jī)顯示

其實(shí)這個(gè)也很簡單用的mouseenter 和 mouseleave事件




# script
 showMessageScrolls(){
     this.messageScroll = true;
},
hideMessageScrolls(){
    this.messageScroll = false;
},

這里解釋一下為什么有一個(gè)paddingRight
因?yàn)槲覀兊臐L動(dòng)條是5px 如果不加在滾動(dòng)條顯示的時(shí)候頁面會(huì)抖動(dòng)

簡單寫法

    @mouseenter="messageScroll = true" 
    @mouseleave="messageScroll = false"

頁面滾動(dòng) 頁面打開時(shí)消息列表滾動(dòng)到底部

this.$nextTick(function () {
                this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight
})

消息發(fā)送滾動(dòng)到底部

 this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight;

內(nèi)容編輯

沒有使用表單元素直接使用的 contenteditable
因?yàn)閏ontenteditable 沒法用雙向數(shù)據(jù)綁定不過可以用數(shù)據(jù)偵聽器有很多辦法但是有很簡單的使用input事件就行了

代碼 頁面代碼

script代碼

樣式代碼

.friend_window {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../img/main_1.jpg");
  border-radius: 4px;
  -webkit-user-select: none;
  background-size: 100% 100%;

  header {
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-app-region: drag;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;

    .nickname {
      color: #FFF;
      line-height: 40px;
      font-size: 20px;
      margin: auto;
      padding-left: 40px
    }

    .buttons {
      i {
        display: inline-block;
        color: #FFF;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        -webkit-app-region: no-drag;

        &:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
  }

  aside {
    height: calc(100% - 40px);
    border-radius: 0 0 4px 4px;
    display: flex;
  }

  nav {
    width: 240px;
    position: relative;

    background-size: 100% 100%;
    overflow-y: auto;

    &:after {
      display: inline-block;
      content: "";
      width: 5px;
      cursor: e-resize;
      position: absolute;
      right: -2px;
      top: 0;
      height: 100%;
    }

    ul {
      li.active {
        background-color: rgba(255, 255, 255, 0.2);
      }
      li {
        list-style: none;
        height: 60px;
        padding-left: 10px;
        cursor: pointer;
        display: flex;
        overflow: hidden;
        align-items: flex-start;

        &:hover {
          background-color: rgba(255, 255, 255, 0.2);
        }

        .push_right {
          padding-right: 10px;
          text-align: center;
          align-self: center;

          .time {
            font-size: 13px;
            color: #CFD3DA;
          }

          .number {
            display: inline-block;
            background-color: #e4393c;
            color: #fff;
            min-width: 15px;
            min-height: 15px;
            padding: 0 2px;
            line-height: 15px;
            border-radius: 50%;
            text-align: center;
            font-size: 12px;
          }
        }

        .msg_box {
          align-self: center;
          flex: 1;
          color: #EFF1F3;

          .messages {
            color: #CFD3DA;
          }
        }

        .avatar {
          width: 45px;
          height: 45px;
          align-self: center;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }
  }

  main {
    background-color: #fff;
    width: calc(100% - 240px);
    border-radius: 0 0 4px 0;

    .message_main {
      height: calc(100% - 35%);
      overflow-y: auto;

      &::-webkit-scrollbar {
        display: block !important;
      }

      .mes_box {
        display: flex;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;

        .avatar {
          width: 40px;
          height: 40px;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .message_box {
          background-color: #FFFFFF;
          color: #333;
          padding: 10px;
          border-radius: 5px;
          max-width: 72%;
          position: relative;
          border: 1px solid #D4D4D4;

          &::before {
            content: "";
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
            border: 1px solid #D4D4D4;
            border-right: none;
            border-top: none;
            background-color: #FFFFFF;
            border-radius: 3px;
            transform: rotate(44deg);
            left: -6px;
            top: 14px;
          }
        }
      }

      .me {
        display: flex;
        justify-content: flex-end;

        .message_box {
          background-color: #A0E759;
          color: #333;
          border: 1px solid #77BF41;

          &::before {
            display: none;
          }

          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
            border: 1px solid #77BF41;
            border-bottom: none;
            border-left: none;
            border-radius: 3px;
            background-color: #A0E759;
            transform: rotate(45deg);
            right: -6px;
            top: 14px;
          }
        }

        .avatar {
          order: 2;
          margin-left: 10px;
        }
      }
    }

    .input_box {
      border-top: 1px solid #ccc;
      height: calc(100% - 65%);

      .menubar {
        height: 30px;
        width: 100%;
        display: flex;
        align-items: center;

        .icon {
          display: inline-block;
          padding: 2px;
          width: 25px;
          height: 25px;
          cursor: pointer;
          margin-right: 5px;
          margin-left: 5px;

          &:hover {
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }

      .footerbar {
        display: flex;
        height: 70px;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;

        button {
          margin: 0 10px;
          padding-left: 30px;
          padding-right: 30px;
        }
      }

      .input {
        font-size: 16px;
        padding: 4px 8px;
        overflow-y: auto;
        height: calc(100% - 70px - 30px);

        background-color: #fff;

        &::-webkit-scrollbar {
          display: block !important;
        }
      }
    }
  }
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

聲明

代碼只為學(xué)習(xí)使用,如果有個(gè)人或者機(jī)構(gòu)使用該代碼帶來的侵權(quán)行為,與本人無關(guān)
如果代碼有不合理之處請大家提出

遺留問題

有一個(gè)問題就是左側(cè)的列表是沒法拉伸的不過已經(jīng)做了樣式了如果不想要的可以去掉這個(gè)css代碼

    &:after {
      display: inline-block;
      content: "";
      width: 5px;
      cursor: e-resize;
      position: absolute;
      right: -2px;
      top: 0;
      height: 100%;
    }

我的博客即將同步至騰訊云+社區(qū)，邀請大家一同入駐：https://cloud.tencent.com/dev...

GPU云服務(wù)器云服務(wù)器 qq群聊天手機(jī)qq聊天聊天界面沒有表情手機(jī)聊天界面js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99374.html

發(fā)表評論

登陸后可評論

0條評論

LucasTwilight

男|高級講師

我要關(guān)注我要私信

TA的文章

如何利用單片機(jī)控制一顆LED 燈閃爍

閱讀 4095·2021-10-08 10:04
cubecloud，88折促銷，中國香港CN2 VPS低至69元，美國CN2 GIA VPS低至60

閱讀 3075·2021-08-11 11:20
百馳云-高性能服務(wù)器，香港三網(wǎng)CN2 2核2G 10M 19/月國內(nèi)、香港、美國、日本、VPS、物

閱讀 2749·2021-07-25 21:37
浮動(dòng)的一些探究

閱讀 2699·2019-08-30 12:44
用cordova+vue-cli 打包成 android apk 過程和路徑問題

閱讀 2326·2019-08-30 11:12
重學(xué)前端學(xué)習(xí)筆記（十二）--瀏覽器工作解析（二）

閱讀 1327·2019-08-26 13:45
JS基礎(chǔ)之?dāng)?shù)據(jù)類型、對象、原型、原型鏈、繼承

閱讀 2375·2019-08-26 11:53
解決小程序點(diǎn)擊彈出模態(tài)框，子父級都有滾動(dòng)條問題

閱讀 3070·2019-08-26 11:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

electron制作聊天界面(仿制qq)

相關(guān)文章

electron 仿制QQ登錄界面

electron仿制百度網(wǎng)盤客戶端2(登錄界面制作)

發(fā)表評論

0條評論

LucasTwilight

男|高級講師

TA的文章

如何利用單片機(jī)控制一顆LED 燈閃爍

cubecloud，88折促銷，中國香港CN2 VPS低至69元，美國CN2 GIA VPS低至60

百馳云-高性能服務(wù)器，香港三網(wǎng)CN2 2核2G 10M 19/月國內(nèi)、香港、美國、日本、VPS、物

浮動(dòng)的一些探究

用cordova+vue-cli 打包成 android apk 過程和路徑問題

重學(xué)前端學(xué)習(xí)筆記（十二）--瀏覽器工作解析（二）

JS基礎(chǔ)之?dāng)?shù)據(jù)類型、對象、原型、原型鏈、繼承

解決小程序點(diǎn)擊彈出模態(tài)框，子父級都有滾動(dòng)條問題

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

electron制作聊天界面(仿制qq)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！