vue 封装 预览pdf / 图片 全局组件

在开发需求的过程中突然意识到elementUI的message组件是这样调用的

！！！！而我们刚好有个预览的需求而且用的地方还非常多！！

如果我用这种方式封装一个组件的话那岂不是大大减少我的代码量😏

（没错就是为了能更好的上班摸鱼···）

于是构思了以下代码

this.$preview(
    {
        src,                      // 图片或者image路径
        numPages: null,           // pdf页数  预览图片的时候传null
        fileType:'pdf'            // 类型 pdf 或者 img
    }
)

接下来是实现过程

在components新建一个preview文件夹

目录如下：

preview.vue 代码如下：

<template>
    <div>
        <el-drawer
            destroy-on-close
            ref="drawer"
            :with-header="false"
            :visible.sync="drawer"
            size="50%"
            direction="ltr"
            :before-close="()=>{
                this.src = null
                this.numPages = 0
                this.drawer = false
            }">
            <div class="pdfBox" v-if="fileType === 'pdf'">
                <pdf
                    ref="pdf"
                    v-for="i in numPages"
                    :key="i"
                    :src="src"
                    :page="i">
                </pdf>
            </div>
            <div v-else>
                <img class="imgStyle" :src="src"/>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    name:'preview',
    components: {
        pdf,
    },
    data(){
        return{
            numPages:'',
            src:'',
            drawer:false,
            fileType:null,
        }
    },
}
</script>

这里用了 ElementUI 的抽屉为容器 以及 vue-pdf 插件来展示 pdf 如果不喜欢可以改掉

毕竟一个容器。可以自行发挥

接下来是将写好的组件挂载到Vue上

index.js

import Vue from 'vue'
import previewDom from './preview.vue'

const previewConstructor = Vue.extend(previewDom)

const preview = ({numPages,src,fileType}) =>{
    const previewInstance = new previewConstructor({
        data:{numPages,src,fileType}
    })
    previewInstance.vm = previewInstance.$mount() // 挂载但是并未插入dom，是一个完整的Vue实例
    previewInstance.vm.drawer = true
    previewInstance.dom = previewInstance.vm.$el
    document.body.appendChild(previewInstance.dom) // 将dom插入body
    return previewInstance.vm
}

export default {
    install: Vue => {
      Vue.prototype.$preview = preview 
    }
}

main.js

import preview from '@/components/preview/index'
Vue.use(preview)

调用

预览图片

let blob = new Blob([res], { type: "application/pdf" });  //res为接口返回的文件流
let src = window.URL.createObjectURL(blob)
this.$preview({src,fileType:file.fileType,numPages:null})

预览pdf

let blob = new Blob([res], { type: "application/pdf" });  //res为接口返回的文件流
let src = window.URL.createObjectURL(blob)
let time = 83*numPages                                    // 防止pdf过大
setTimeout(()=>{                   
    this.$preview({src,numPages,fileType:file.fileType})
},time)

接下来就可以看看效果了

nice 完成！！！