Electron开发实战之09-Chat.vue

来源:简书分类: 文章浏览史发布时间:2021-09-08 15:42:20 最后更新:2021-09-08 浏览:645

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/c68ba42aea8c

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2021-09-08 15:42:20

源码 j、源码 j-step-c9、相关视频

我们先实现一个简单的流程：

简单流程

可以看到，对于Chat.vue页面，我们需要一个Tabs组件。
我们选用element-ui快速搭建页面。

bash

yarn add element-ui -D

renderer/index.js


// 添加代码
...
import { TabPane, Tabs } from 'element-ui'
...
Vue.component(TabPane.name, TabPane)
Vue.component(Tabs.name, Tabs)
...

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">
        联系人
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'M'
    }
  }
}
</script>

<style scoped>
#chat {
  height: 100%;
  margin: 0 8px;
}
</style>

我们还需要两个自定义组件：

ChatList.vue: 联系人列表
SendMessage.vue: 用来发送消息

上一节 Electron开发实战之08-Login.vue
目录
 下一节 Electron开发实战之10-ChatList.vue