electron制作仿制qq聊天界面的示例代碼
更新時(shí)間：2018年11月26日 10:39:29 作者：李昊天
這篇文章主要介紹了electron制作仿制qq聊天界面的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了electron制作仿制qq聊天界面的示例代碼，分享給大家，具體如下：
效果圖:
樣式使用scss和flex布局
這也是制作IM系統(tǒng)的最后一個(gè)界面了!
在制作之前參考了qq和千牛
需要注意的點(diǎn)
qq將滾動(dòng)條美化了 而且在無(wú)操作的情況下是不會(huì)顯示的
滾動(dòng)條美化
::-webkit-scrollbar { /*滾動(dòng)條整體樣式*/
width: 5px; /*高寬分別對(duì)應(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è)也很簡(jiǎn)單 用的mouseenter 和 mouseleave事件
<div
:style="{overflowY:messageScroll? 'auto' : 'hidden',paddingRight: messageScroll ? '0': '5px' }"
@mouseenter="showMessageScrolls"
@mouseleave="hideMessageScrolls">
</div>
# script
showMessageScrolls(){
this.messageScroll = true;
},
hideMessageScrolls(){
this.messageScroll = false;
},
這里解釋一下為什么有一個(gè)paddingRight
因?yàn)槲覀兊臐L動(dòng)條是5px 如果不加 在滾動(dòng)條顯示的時(shí)候頁(yè)面會(huì)抖動(dòng)
簡(jiǎn)單寫(xiě)法
@mouseenter="messageScroll = true" @mouseleave="messageScroll = false"
頁(yè)面滾動(dòng)
頁(yè)面打開(kāi)時(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)容編輯
沒(méi)有使用表單元素 直接使用的 contenteditable
因?yàn)閏ontenteditable 沒(méi)法用雙向數(shù)據(jù)綁定 不過(guò) 可以用數(shù)據(jù)偵聽(tīng)器 有很多辦法 但是有很簡(jiǎn)單的 使用input事件就行了
代碼
頁(yè)面代碼
<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>關(guān)閉</Button>
<Button type="primary">發(fā)送</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: '閑過(guò)信陵飲，脫劍膝前橫。'},
{msg: '將炙啖朱亥，持觴勸侯嬴。'},
{msg: '三杯吐然諾，五岳倒為輕'},
{msg: '眼花耳熱后，意氣素霓生。'},
{msg: '救趙揮金槌，邯鄲先震驚。'},
{msg: '千秋二壯士，烜赫大梁城。'},
{msg: '縱死俠骨香，不慚世上英。'},
{msg: '誰(shuí)能書(shū)閣下，白首太玄經(jīng)。'},
{msg: '是唐代大詩(shī)人李白借樂(lè)府古題創(chuàng)作的一首詩(shī)。此詩(shī)開(kāi)頭四句從俠客的裝束、兵刃、坐騎刻畫(huà)俠客的形象；第二個(gè)四句描寫(xiě)俠客高超的武術(shù)和淡泊名利的行藏；第三個(gè)四句引入信'},
],
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;
}
聲明
代碼只為學(xué)習(xí)使用,如果有個(gè)人或者機(jī)構(gòu)使用該代碼帶來(lái)的侵權(quán)行為,與本人無(wú)關(guān)
如果代碼有不合理之處請(qǐng)大家提出
遺留問(wèn)題
有一個(gè)問(wèn)題就是左側(cè)的列表是沒(méi)法拉伸的 不過(guò)已經(jīng)做了樣式了 如果不想要的可以去掉這個(gè)css代碼
&:after {
display: inline-block;
content: '';
width: 5px;
cursor: e-resize;
position: absolute;
right: -2px;
top: 0;
height: 100%;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用electron制作滿屏心特效的示例代碼
- electron + vue項(xiàng)目實(shí)現(xiàn)打印小票功能及實(shí)現(xiàn)代碼
- electron中使用bootstrap的示例代碼
- Electron中實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳功能
- 從零開(kāi)始用electron手?jǐn)]一個(gè)截屏工具的示例代碼
- 使用electron將vue-cli項(xiàng)目打包成exe的方法
- 解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題
- 詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
- 詳解Angular CLI + Electron 開(kāi)發(fā)環(huán)境搭建
- 關(guān)于node-bindings無(wú)法在Electron中使用的解決辦法
相關(guān)文章
json字符串對(duì)象轉(zhuǎn)換代碼實(shí)例
這篇文章主要介紹了json字符串對(duì)象轉(zhuǎn)換代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
js構(gòu)造函數(shù)constructor和原型prototype原理與用法實(shí)例分析
這篇文章主要介紹了js構(gòu)造函數(shù)constructor和原型prototype原理與用法,結(jié)合實(shí)例形式分析js構(gòu)造函數(shù)constructor和原型prototype基本原理、功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼)
這篇文章主要介紹了JavaScript函數(shù)封裝隨機(jī)顏色驗(yàn)證碼(完整代碼),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
javascript 常見(jiàn)的閉包問(wèn)題的解決辦法
javascript 常見(jiàn)的閉包問(wèn)題的解決辦法,需要的朋友可以參考下。2009-11-11
現(xiàn)在純粹用js的人越來(lái)越少了，更多的人喜歡jquery，可使我還是喜歡javascript，下面給出一個(gè)用javascript寫(xiě)的背景切換的小例子，各位大蝦不要罵，只是寫(xiě)給自己看的，也供js事件的產(chǎn)考依據(jù)。2010-11-11
使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表
這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)可編輯的select下拉列表，個(gè)人感覺(jué)還不錯(cuò),需要的朋友可以參考下2014-02-02
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
javascript 包裹節(jié)點(diǎn) 提高效率
模仿jQuery，創(chuàng)建幾個(gè)包裹節(jié)點(diǎn)的方法，發(fā)現(xiàn)jQuery的方法很低效啊，下一次他又可以說(shuō)這幾個(gè)方法可以提升了多少多少了。2010-02-02
這篇文章主要介紹了2種創(chuàng)建js對(duì)象和js類的方法，十分的簡(jiǎn)單，推薦給大家。2014-12-12
微信小程序 獲取手機(jī)號(hào) JavaScript解密示例代碼詳解
這篇文章主要介紹了微信小程序 獲取手機(jī)號(hào) JavaScript解密的示例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05