chat/_src/components/chatInput/toolbar.vue

<template>
  <div class="tool-wrap" @click.stop v-show="toolShow">
    <div class="tool-item">
      <div class="icon-box" @click="$packetSend">
        <i class="packet-icon"></i>
      </div>
      <span class="type">{{ $t('chat.redpack') }}</span>
    </div>
    <div class="tool-item">
      <div class="icon-box">
        <i class="picture-icon"></i>
        <input type="file" ref="inputFile1" accept="image/*" @change="handleFile">
      </div>
      <span class="type">{{ $t('chat.image') }}</span>
    </div>
    <div class="tool-item">
      <div class="icon-box">
        <i class="audio-icon"></i>
        <input type="file" ref="inputFile2" accept="audio/*" @change="handleFile">
      </div>
      <span class="type">{{ $t('chat.audio') }}</span>
    </div>
    <div class="tool-item">
      <div class="icon-box">
        <i class="video-icon"></i>
        <input type="file" ref="inputFile3" accept="video/*" @change="handleFile">
      </div>
      <span class="type">{{ $t('chat.video') }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'toolbar',
  props: {
    toolShow: Boolean
  },
  methods: {
    handleFile (e) {
      this.$emit('handleFile', e)
    },
    resetInput () {
      if (this.$refs.inputFile1) {
        this.$refs.inputFile1.value = null
      }
      if (this.$refs.inputFile2) {
        this.$refs.inputFile2.value = null
      }
      if (this.$refs.inputFile3) {
        this.$refs.inputFile3.value = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-wrap {
  background-color: #f6f6f6;
  display: flex;
  padding: 16px 0;
  .tool-item {
    flex: 1;
    text-align: center;
  }
  .type {
    font-size: 14px;
    color: #666666;
  }
  .icon-box {
    width: 58px;
    height: 58px;
    margin: 0 auto;
    cursor: pointer;
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #efefef;
    box-sizing: border-box;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    &:hover {
      opacity: 0.8;
    }
    input[type="file"] {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 4;
    }
    i {
      display: inline-block;
    }
    .packet-icon {
      background: url("../../assets/packet-icon.png") no-repeat;
      background-size: 100%;
      width: 21px;
      height: 26px;
    }
    .picture-icon {
      background: url("../../assets/pic-icon.png") no-repeat;
      background-size: 100%;
      width: 27px;
      height: 21px;
    }
    .audio-icon {
      background: url("../../assets/audio-icon.png") no-repeat;
      background-size: 100%;
      width: 18px;
      height: 26px;
    }
    .video-icon {
      background: url("../../assets/video-icon.png") no-repeat;
      background-size: 100%;
      width: 30px;
      height: 18px;
    }
  }
}
</style>