源碼 j匆绣、源碼 j-step-c10驻右、相關(guān)視頻
首先我們在renderer目錄下創(chuàng)建components文件夾，在components文件夾下創(chuàng)建ChatList.vue崎淳。
- components/ChatList.vue
<template>
<div id="chat-list">
<div id="item-wrap">
<div class="item item-2">
<span>hm</span>
<small>小白</small>
</div>
<div class="item item-1">
<span>Joe</span>
<small>自在</small>
</div>
</div>
</div>
</template>
<style scoped>
#chat-list {
display: flex;
flex-direction: column;
}
#item-wrap {
overflow-y: auto;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
height: 44px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.item:hover {
background-color: #eaeaea;
}
.item-1 {
color: #67c23a;
background-color: #f0f9eb;
}
.item-2 {
color: #999;
background-color: #fff;
}
</style>
- views/Chat.vue
<!-- 請?zhí)砑痈吡敛糠执a -->
<!-- <template>
<div id="chat">
<el-tabs v-model="activeName">
<el-tab-pane label="發(fā)消息" name="F">
發(fā)消息
</el-tab-pane>
<el-tab-pane label="聯(lián)系人" name="M"> -->
<chat-list></chat-list>
<!-- </el-tab-pane>
</el-tabs>
</div>
</template> -->
<script>
import ChatList from '@/components/ChatList.vue'
// export default {
components: {
'chat-list': ChatList
},
// data () {
// return {
// activeName: 'M'
// }
// }
// }
</script>
上一節(jié) Electron開發(fā)實(shí)戰(zhàn)之09-Chat.vue
目錄
下一節(jié) Electron開發(fā)實(shí)戰(zhàn)之11-SendMessage.vue
