chat/_src/components/chatRoom/filePreview.vue

<template>
  <div class="preview-wrap">
    <div class="preview-hd">{{fileInfo && fileInfo.type==1?$t('chat.imageComfirm'):$t('chat.videoComfirm')}}：</div>
    <div class="preview-bd">
      <img :src="this.fileInfo && this.fileInfo.preview" v-if="fileInfo && fileInfo.type==1">
      <video v-if="fileInfo && (fileInfo.type==2 || fileInfo.type==3)" controls
      :src="this.fileInfo && this.fileInfo.preview"
      :class="[{'ext-audio':fileInfo.type==3}]"></video>
    </div>
    <div class="preview-ft">
        <el-button @click="closeFilePreview">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" @click="handleFileSend">{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'

Vue.component(Button.name, Button)
export default {
  props: {
    fileInfo: Object
  },
  computed: {
    previewUrl () {
      if (!this.fileInfo) return ''
      if (this.fileInfo.type == 1) {
        return this.fileInfo.preview
      } else {
        return window.webkitURL.createObjectURL(this.fileInfo.res)
      }
    }
  },
  methods: {
    closeFilePreview () {
      this.$emit('closeFilePreview')
    },
    handleFileSend () {
      this.$emit('handleFileSend', this.fileInfo)
    }
  }

}
</script>

<style lang="scss" scoped>
.preview-wrap {
  position: absolute;
  top: -10px;
  left: 4px;
  transform: translateY(-100%);
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
  background-color: #ffffff;
  box-shadow: 0px 1px 5px 1px #cdcdcd;
}
.preview-hd{
  line-height: 36px;
  font-size: 14px;
  color: #333;
}
.preview-bd {
  position: relative;
  text-align: center;
  min-width: 200px;
  min-height: 100px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  &::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  img{
    max-width: 280px;
    max-height: 280px;
  }
  video{
    border: 0;
    max-width: 280px;
    max-height: 280px;
    &:focus{
      outline: none;
    }
    &.ext-audio{
      height: 50px;
      width: 200px;
    }
  }
}
.preview-ft {
  text-align: right;
  line-height: 44px;
}
</style>