You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.0 KiB
102 lines
2.0 KiB
<template>
|
|
<div class="flex-container">
|
|
<div class="file-list">
|
|
<el-table :data="fileList" style="width: 100%" highlight-current-row @row-click="rowClick">
|
|
<el-table-column label="文件列表">
|
|
<template slot-scope="scope">
|
|
<span style="margin-left: 10px">{{ scope.row.name|f_fileName }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="file-show">
|
|
<template v-if="isImg(activeFile.url)">
|
|
<el-image :fit="'fill'" :src="activeFile.url" />
|
|
</template>
|
|
<template v-if="isPdf(activeFile.url)">
|
|
<pdf :src="activeFile.url" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import pdf from 'vue-pdf'
|
|
|
|
export default {
|
|
components: {
|
|
pdf
|
|
},
|
|
filters: {
|
|
f_fileName(val) {
|
|
return val.substring(0, val.lastIndexOf('-'))
|
|
},
|
|
f_url(val) {
|
|
return `${window.SITE_CONFIG['apiURL']}/upload/${val}`
|
|
}
|
|
},
|
|
props: {
|
|
fileList: { type: Array, required: true }
|
|
},
|
|
data() {
|
|
return {
|
|
activeFile: {}
|
|
}
|
|
},
|
|
watch: {
|
|
fileList: {
|
|
immediate: true,
|
|
handler(val) {
|
|
this.activeFile = this.fileList[0] || {}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
})
|
|
},
|
|
methods: {
|
|
fileType(url) {
|
|
return url ? url.substring(url.lastIndexOf('.') + 1) : ''
|
|
},
|
|
isImg(url) {
|
|
const type = this.fileType(url)
|
|
return ['png', 'jpg', 'jpeg', 'bmp'].indexOf(type.toLowerCase()) >= 0
|
|
},
|
|
isPdf(url) {
|
|
const type = this.fileType(url)
|
|
return ['pdf'].indexOf(type.toLowerCase()) >= 0
|
|
},
|
|
rowClick(row) {
|
|
this.activeFile = row
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
// height: 500px;
|
|
}
|
|
.file-list{
|
|
// display:flex;
|
|
width: 200px;
|
|
height: 100%;
|
|
margin-right: 20px;
|
|
|
|
.file-item{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.file-show{
|
|
// display:flex;
|
|
width: calc(100% - 220px);
|
|
height: 100%;
|
|
border:1px solid;
|
|
}
|
|
</style>
|