Electron开发实战之09-Chat.vue

来源:简书 分类: 文章浏览史 发布时间:2021-09-08 15:42:20 最后更新:2021-09-08 浏览:566
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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

php技术微信