FileView.vue 1.11 KB
<template>
    <div class="file-view">
        <!-- 文件预览 -->
        <div v-if="!isImage" class="flex items-center">
            <doc-icon type="file-filled" style="color: #999; font-size: 20px"/>
            <a class="ml-2" @click.prevent="onDown">下载</a>
        </div>
        <van-image :src="file.url" v-else @click="viewImage">
            <template v-slot:loading>
                <van-loading type="spinner" size="20" />
            </template>
        </van-image>
    </div>
</template>

<script>

export default {
    props: {
        file: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['view-image'],
    computed: {
        isImage() {
            const array = ['JPG', 'PNG', 'JEPG', 'GIF']
            return array.includes(this.file.type) || array.includes(this.file.ext.toLocaleUpperCase())
        }
    },
    methods: {
        onDown() {
            window.open(this.file.url, '_blank')
        },
        viewImage() {
            this.$emit('view-image', this.file)
        }
    }
}
</script>

<style lang="less" scoped>
.file-view {
    width: 100px;
}
</style>