1. Component previewPdf
<template>
<el-drawer
:title="drawerName"
:visible.sync="drawerVal"
:direction="direction"
:append-to-body="true"
size="100%"
:before-close="drawerClose">
<iframe :src="url" width="100%" height="100%" />
</el-drawer>
</template>
<script>
export default {
props: {
drawerName: {
type: String
},
drawerVal: {
type: Boolean,
default: () => false
},
url: {
type: String,
default: () => ''
}
},
data () {
return {
direction: 'rtl'
}
},
methods: {
drawerClose () {
this.url = ''
this.$emit('update:drawerVal', false)
}
}
}
</script>
2. Page reference
<preview-pdf :drawerName="drawerName" :drawerVal.sync="drawerVal" :url="url" />
import previewPdf from './BasicData/Agreement/components/previewPdf.vue'
export default {
components: {
previewPdf
},
data(){
return{
url:'',
drawerName:'',
drawerVal:'',
}
},
methods: {
handlePreview(file) {
this.url = file.url;
this.drawerName = '质检报告';
this.drawerVal = true;
},
}
}