配置

1. config:{
      //是否显示遮罩层
      showMask: true,
      // 对于外网可访问文件使用其他渠道进行显示  默认microoffice
      outerLink: "https://view.officeapps.live.com/op/view.aspx?src=",
      // 文件是否外网可访问
      isPublic: true,
      // 是否可以通过点击mask关闭
      clickModal: true,
      // url前缀
      urlPrefix: "",
      // 是否仅查看图片 组
      isimgsOnly: false,
      // 是否显示左侧
      showLeft: true,
      // imgconfig配置图片按钮
      imgconfig: {
        // 支持缩小
        narrow: true,
        reduction: true,
        enlarge: true,
        leftRotate: true,
        rightRotate: true,
        downloadFile: false,
        lastCard: true,
        nextCard: true,
      },
      fetchConfig: {},
    },

props: {
      config: {
        default: () => ({}),
      },
      // 传入{url:'',name:'',fileType:''}
      urls: { default: () => [] },
      showTag: {
        default: true,
      },
    },

安装

npm install d-viewer  
import dViewer from 'd-viewer' 
vue.use(dViewer,config)

使用

1. 直接使用

   <dViewer
         :urls="[
           {
             url: 'https://xxxe.png',
             name: 'xxx.png',
             fileType: 'png',
           },
           {
             url: 'https:xxxx.pdf',
             name: 'xxx.pdf',
             fileType: 'pdf',
           },  ]"></dViewer>

2. 方法调用

   config可不传
   this.$preview([{
             url: 'https://xxxe.png',
             name: 'xxx.png',
             fileType: 'png',
           },],config=null)