chat/_src/components/chatRoom/inputArea.vue

<template>
  <div class="box-ft">
    <transition name="msgbox-fade">
      <Emoji v-show="emojiShow" :emojiShow="emojiShow" @addEmoji="addEmoji" @closeEmojiList="closeEmojiList"></Emoji>
    </transition>
    <transition name="msgbox-fade">
      <file-preview v-show="filePreviewShow" :fileInfo='fileInfo' @handleFileSend="handleFileSend" @closeFilePreview="closeFilePreview"></file-preview>
    </transition>
    <chat-at
      ref="chatAt"
      v-if="atShow"
      @atperson="atPerson"
      :curInd="atInd"
      :filterList="filterMembers"
    ></chat-at>
    <div class="toolbar">
      <i class="look-icon" @click.stop="handleEmoji"></i>
      <div class="file-icon">
        <input type="file" ref="inputFile" @change="handleFile">
      </div>
      <i class="icon-packet" @click="$packetSend"></i>
    </div>
    <div class="send-content">
      <form class="input-wrap" @submit="handleSend">
        <textarea
          @click.stop="handleClick"
          @input="handleInput"
          @keydown.up="handleUp"
          @keydown.down="handleDown"
          @keydown.left="handleLeft"
          @keydown.right="handleRight"
          @keydown.delete="handleDel"
          @keydown.esc="handleEsc"
          cols="1"
          ref="chatInput"
          rows="1"
          @keydown.enter="handleKeyDown"
          placeholder
          v-focus
          v-model="inputMsg"
          @focus="handleFocus"
          @blur="handleBlur"
          @contextmenu.prevent="handleContextmenu"
        />
      </form>
      <ul class="pub-pop-toolbar" v-show="isShowContextmenu" :style="{top:`${menuTop}px`,left:`${menuLeft}px`}">
        <li @click.prevent="handlePaste">{{$t('chat.paste')}}</li>
      </ul>
    </div>
    <div class="send-action">{{$t('chat.enterTips')}}
      <el-button @click="handleSend" :disabled="!!!inputMsg">{{$t('chat.send')}}</el-button>
    </div>
  </div>
</template>
<script>
import Emoji from '@/components/emoji'
import chatAt from '@/components/chatAt'
import filePreview from './filePreview'
import { mapState } from 'vuex'
import { chatAtMixin, chatInputMixin } from '@/mixins'
import { inputMixin } from '@/mixins/chat'

export default {
  name: 'inputArea',
  mixins: [chatAtMixin, chatInputMixin, inputMixin],
  components: {
    Emoji,
    chatAt,
    filePreview
  },
  watch: {
    '$route' () {
      this.$refs.chatInput.focus()
      this.inputMsg = ''
    }
  },
  computed: {
    ...mapState(['curSession'])
  },
  mounted () {
    document.addEventListener('paste', this.initPaste)
    document.addEventListener('drop', this.initDrop)
    document.addEventListener('dragover', this.initDragOver)
  },
  beforeDestroy () {
    document.removeEventListener('paste', this.initPaste)
    document.removeEventListener('drop', this.initDrop)
    document.removeEventListener('dragover', this.initDragOver)
  },
  methods: {
    handleEmoji () {
      this.emojiShow = !this.emojiShow
    },
    initDrop (e) {
      e.preventDefault()
      let files = Array.from(e.dataTransfer.files)
      files.forEach(file => this.handleFile(file))
    },
    initDragOver (e) {
      e.preventDefault()
    },
    initPaste (event) {
      var items = (event.clipboardData || window.clipboardData).items
      if (items && items.length) {
        Array.from(items).forEach(item => {
          let file = item.getAsFile()
          if (file) {
            this.handleFile(file)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box-ft {
  height: 180px;
  border-top: 1px solid #d6d6d6;
  padding-right: 16px;
  position: relative;
  background: #eeeeee;
}

.toolbar {
  padding: 10px 20px;
  font-size: 0;
  background: #eee;
  i {
    color: #333333;
    font-size: 18px;
    margin-right: 15px;
    vertical-align: middle;
    cursor: pointer;
  }
}
.send-action {
  text-align: right;
}
.look-icon {
  background: url("../../assets/icon-face.png") no-repeat;
  background-size: 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.file-icon {
  background: url("../../assets/icon-file.png") no-repeat;
  background-size: 100%;
  width: 19px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  input[type="file"] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}
.send-action {
  color: #bababa;
  font-size: 12px;
  button {
    margin-left: 10px;
  }
}
.input-wrap {
  textarea {
    display: block;
    background-color: #eee;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    height: 90px;
    line-height: 1.4;
    padding-left: 20px;
    outline: none;
    border: 0;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.icon-packet{
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  background: url('../../assets/icon-packet.png') center center no-repeat;
  background-size: 100%;
  width: 21px;
  height: 21px;
}
.pub-pop-toolbar{
  right: auto;
}
</style>