Electron开发实战之11-SendMessage.vue

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

• renderer/index.js

// 请添加高亮部分代码
...
// import {
  Button,
  Input,
  // TabPane,
  // Tabs } from 'element-ui'
...
 Button)
 Input)
//  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>