electron制作仿制qq聊天界面的示例代码


Posted in Javascript onNovember 26, 2018

本文介绍了electron制作仿制qq聊天界面的示例代码,分享给大家,具体如下:

效果图:

electron制作仿制qq聊天界面的示例代码

样式使用scss和flex布局

这也是制作IM系统的最后一个界面了!

在制作之前参考了qq和千牛

需要注意的点

qq将滚动条美化了 而且在无操作的情况下是不会显示的

滚动条美化

::-webkit-scrollbar { /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  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 { /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(228, 57, 60, 0.2);
  border-radius: 10px;
  background: #EDEDED;
  position: absolute;
}

滚动条根据时机显示

其实这个也很简单 用的mouseentermouseleave事件

<div
  :style="{overflowY:messageScroll? 'auto' : 'hidden',paddingRight: messageScroll ? '0': '5px' }"
  @mouseenter="showMessageScrolls" 
  @mouseleave="hideMessageScrolls">
</div>

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

这里解释一下为什么有一个paddingRight

因为我们的滚动条是5px 如果不加 在滚动条显示的时候页面会抖动

简单写法

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

页面滚动

页面打开时消息列表滚动到底部

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

消息发送滚动到底部

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

内容编辑

没有使用表单元素 直接使用的 contenteditable

因为contenteditable 没法用双向数据绑定 不过 可以用数据侦听器 有很多办法 但是有很简单的 使用input事件就行了

代码

页面代码

<template>
  <div class="friend_window">
    <header>
      <div class="nickname">Lee</div>
      <div class="buttons">
        <i class="iconfont"></i>
        <i class="iconfont"></i>
      </div>
    </header>
    <aside>
      <nav>
        <ul>
          <li >
            <div class="avatar"><img src="@/assets/img/1.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/2.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/3.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/4.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li class="active">
            <div class="avatar"><img src="@/assets/img/5.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天1-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/6.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/7.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
          <li >
            <div class="avatar"><img src="@/assets/img/8.jpg" alt=""></div>
            <div class="msg_box">
              <div class="nickname">李昊天-</div>
              <div class="messages">最近还好吗</div>
            </div>
            <div class="push_right">
              <div class="time">12:50</div>
              <div class="number">1</div>
            </div>
          </li>
        </ul>
      </nav>
      <main>
        <div
            class="message_main"
            ref="ele"
            :style="{overflowY:messageScroll? 'auto' : 'hidden',paddingRight: messageScroll ? '0': '5px' }"
            @mouseenter="showMessageScrolls" @mouseleave="hideMessageScrolls"
        >
          <div class="mes_box" v-for="(item,index) in list" :class="{'me' : index % 2 === 0}">
            <div class="avatar">
              <img src="@/assets/img/5.jpg" alt="">
            </div>
            <div class="message_box">
              {{item.msg}}
            </div>
          </div>
        </div>
        <div class="input_box">
          <div class="menubar">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-biaoqing-weixiao" rel="external nofollow" ></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-folder" rel="external nofollow" ></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tupian1" rel="external nofollow" ></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shuangsechangyongtubiao-" rel="external nofollow" ></use>
            </svg>
          </div>
          <div class="input" ref="input" contenteditable="true" @keydown.enter="sendMsg" @change="inputMsg"
             @input="inputMsg"></div>
          <div class="footerbar">
            <Button>关闭</Button>
            <Button type="primary">发送</Button>
          </div>
        </div>
      </main>
    </aside>
  </div>
</template>

script代码

<script>
  import '@/assets/css/scrool.css'
  import '@/assets/fonts/iconfont.js';

  export default {
    name: "friend",
    data() {
      return {
        list: [
          {msg: '赵客缦胡缨,吴钩霜雪明'},
          {msg: '银鞍照白马,飒沓如流星'},
          {msg: '十步杀一人,千里不留行'},
          {msg: '事了拂衣去,深藏身与名'},
          {msg: '闲过信陵饮,脱剑膝前横。'},
          {msg: '将炙啖朱亥,持觞劝侯嬴。'},
          {msg: '三杯吐然诺,五岳倒为轻'},
          {msg: '眼花耳热后,意气素霓生。'},
          {msg: '救赵挥金槌,邯郸先震惊。'},
          {msg: '千秋二壮士,?@赫大梁城。'},
          {msg: '纵死侠骨香,不惭世上英。'},
          {msg: '谁能书阁下,白首太玄经。'},
          {msg: '是唐代大诗人李白借乐府古题创作的一首诗。此诗开头四句从侠客的装束、兵刃、坐骑刻画侠客的形象;第二个四句描写侠客高超的武术和淡泊名利的行藏;第三个四句引入信'},
        ],
        msg: '',
        number:8,
        messageScroll:false
      }
    },
    mounted() {
      this.$nextTick(function () {
        this.$refs.ele.scrollTop = this.$refs.ele.scrollHeight
      })
    },

    methods: {
      showMessageScrolls(){
        this.messageScroll = true;
      },
      hideMessageScrolls(){
        this.messageScroll = false;
      },
      inputMsg(e) {
        this.msg = e.target.innerHTML;
      },
      sendMsg(e) {
        this.list.push({msg: this.msg});
        this.msg = '';
        this.$refs.input.innerHTML = '';
        setTimeout(() => {
          this.$refs.ele.scrollTop = this.$refs.ele.scrollHeight;
        }, 200);
        e.preventDefault();
      }
    }
  }
</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;
}

声明

代码只为学习使用,如果有个人或者机构使用该代码带来的侵权行为,与本人无关

如果代码有不合理之处请大家提出

遗留问题

有一个问题就是左侧的列表是没法拉伸的 不过已经做了样式了 如果不想要的可以去掉这个css代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
JS前端轻量fabric.js系列之画布初始化
Aug 05 Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
微信小程序页面间值传递的两种方法
Nov 26 #Javascript
Vue中的methods、watch、computed的区别
Nov 26 #Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 #Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 #Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
You might like
JavaScript事件列表解说
2006/12/22 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
DOM 高级编程
2015/05/06 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
教师岗位聘任书范文
2014/03/29 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
python实现图片批量压缩
2021/04/24 Python
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python