您好,登录后才能下订单哦!
本文介绍了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; }
滚动条根据时机显示
其实这个也很简单 用的mouseenter
和 mouseleave
事件
<div : @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" : @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%; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。