首先我们在renderer目录下创建components文件夹，在components文件夹下创建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
<!-- 请添加高亮部分代码 -->
<!-- <template>
<div id="chat">
<el-tabs v-model="activeName">
<el-tab-pane label="发消息" name="F">
发消息
</el-tab-pane>
<el-tab-pane label="联系人" 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>
上一节 Electron开发实战之09-Chat.vue
目录
下一节 Electron开发实战之11-SendMessage.vue
