element+vue 之预览pdf组件

1.组件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.页面引用

 <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;
            },
         

     }
 }