@hejk/affix v0.0.1

viewer

基于vue2的资源预览控件，支持放大、缩小、旋转、拖拽，支持远程图片预览、调起下载、打印，支持多图预览。

更新说明

v0.2.1 1. 优化:允许在绑定到全局时传人参数vue.use(Viewer,options),单独使用组件时不生效。 v0.2.0 1. 新增 pdf-viewer pdf预览组件支持支持函数预览 v0.1.1 1. 修改下载方法，目前只保留模拟a下载的逻辑 1. 新增downloadFN允许自定义下载方法 v0.1.0 1. 图片预览控件

兼容

• chrome //谷歌
• ie11 //IE
• safari //mac safari
• firefox // 火狐

目录说明

• build 项目脚手架配置
• lib 生产用代码
• src 源码
• index.html demo

命令

进行开发

npm start

打包出生产版本 commonjs 版本

npm run build:common

发布代码

  npm version <newversion> | major | minor | patch]

 npm publish

安装

npm i @heisea/viewer

初始化

import Viewer from '@heisea/viewer'
Vue.use(Viewer,{
    props: {
        fileId: 'id',
        fileName: 'originalFileName',
        fileSuffix: 'ext',
        fileUrl: 'url',
        data: 'data'
    },
    http: {
        filePath: 'http://hxgw.heisea.cn/base/fe/info'
    }
}); // 当前组件
Vue.prototype.$fetch = fetch; // 当传参数时会调用当前获得文件

注意pdf预览，必须设置拷贝资源文件vendors~pdfjsWorker.common.js 到根目录

new CopyWebpackPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, '../node_modules/@heisea/viewer/lib/vendors~pdfjsWorker.common.js'),
                to: path.resolve(__dirname, '../dist/')
            }]
    }),

使用

1.当组件使用

<template>
     <img-viewer v-bind="cfg" />
</template>
<script>
export default {
    data() {
        return {
            cfg: {
                mode: 'img',
                value: 'http://bucket-cert-test.oss-cn-shanghai.aliyuncs.com/2019/10/51df3ed3-fa5f-4334-9963-6767fe63aa06.jpg'
            },
        };
    }
};
</script>

2.函数调用 this.$viewer({value:url,options}) 支持单独配置配置当前预览器

    // 直接打开图片
    this.$viewer('http://bucket-cert-test.oss-cn-shanghai.aliyuncs.com/2019/10/51df3ed3-fa5f-4334-9963-6767fe63aa06.jpg');
    // 直接打开id对应的资源
    this.$viewer('1182133098524016641,1182222336212881410');

配置