# d-viewer

**Repository Path**: miniby/d-viewer

## Basic Information

- **Project Name**: d-viewer
- **Description**: 1.预览组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-12
- **Last Updated**: 2025-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 配置

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: {},
    },
   ```

2.

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

### 安装

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

### 使用

<br/>

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)
   ```