Electron开发实战之11-SendMessage.vue

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

首先我们在components文件夹下创建SendMessage.vue

• renderer/index.js

// 请添加高亮部分代码
...
// import {
  Button,
  Input,
  // TabPane,
  // Tabs } from 'element-ui'
...
Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
// Vue.component(TabPane.name, TabPane)
...

• components/SendMessage.vue

<template>
  <div id="send-message">
    <el-input
      type="textarea"
      :rows="10"
      placeholder="输入文本消息"></el-input>

    <div id="buttons">
      <el-button
        id="send-text-btn"
        type="primary">发送文本消息</el-button>
    </div>
  </div>
</template>

<style scoped>
#buttons {
  margin-top: 8px;
}
</style>

• views/Chat.vue

<!-- 请添加高亮部分代码 -->
<!-- <template>
  <div id="chat">
    <el-tabs v-model="activeName">
      <el-tab-pane label="发消息" name="F"> -->
        <send-message></send-message>
      <!-- </el-tab-pane>
      <el-tab-pane label="联系人" name="M">
        <chat-list></chat-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template> -->

<script>
import SendMessage from '@/components/SendMessage.vue'
// import ChatList from '@/components/ChatList.vue'
// export default {
  // components: {
    'send-message': SendMessage,
   //  'chat-list': ChatList
  // },
 ...
// }
</script>

上一节 Electron开发实战之10-ChatList.vue
目录
下一节 Electron开发实战之12-应用架构