viewerjs图片插件的在vue框架下于typescript的使用

<div class="form-group" v-show="receiptshow" id="ManageDetailtest">
                              <div class="panel-heading font-bold m-b-sm">回单信息</div>
                                <div v-for="(index, item) in receiptPicList">
                                    <label class="pull-left m-l m-r">回单{{$index + 1}}</label>
                                    <table class="table bg-white-only b-a">
                                        <tbody>
                                            <tr v-for="itemC in item" class="col-md-4">
                                                <td>
                                                    <!-- <img :id="itemC.id" data-toggle="modal" data-target="#orderReceipt" :src="itemC.path" @click="bigPic(itemC)" class="accountDetail_tModol" style="width:298px;height:250px;"> -->
                                                    <img :id="itemC.id" data-toggle="modal" data-target="#orderReceipt" :src="itemC.path" @click="bigPic(itemC,itemC.id)" class="accountDetail_tModol" style="width:298px;height:250px;">
                                                </td>
                                                <td style="vertical-align:middle">
                                                    <button type="button" class="btn btn-primary btn-xs" id="manageDetail_button" name="manageDetail_button" @click="downLoadReceiptPic(itemC.id)">
                                                        <span class="fa fa-cloud-download"></span> 下载
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

typescript

//点击并缩放图片
    bigPic = function(picFile,index){
        //alert(index)
        //console.log(.length)
        this.picPath = '';
        this.picPath = picFile.path; 
        // this.bbImg();
        var viewer = new Viewer(document.getElementById('Detailtest'),{
            url: 'src',
            navbar:false,
            title:false,
            toolbar: {
                zoomIn:true,
                zoomOut:true,
                play: {
                    show:0,
                },
                rotateLeft:true,
                reset:true,
                rotateRight:true,
                flipHorizontal:true,
                flipVertical:true,
            }
        })
    }

//vue1.0中放在ready中
this.receiptPicList = [
            [
                {
                    id:"423c6522-2083-49f4-a346-8c199f0dac8f",isExists:true,name:"0148967.jpg",path:"https://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2018/1/31/95311978.jpg"
                },{
                    id:"4f827cc4-4c32-41b3-afb7-04b24790dc2d",isExists:true,name:"0128967.jpg",path:"http://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2017/11/7/4f331f3f286ff7187daf0ff269ba5e16.png"
                },{
                    id:"4f827cc4-4c32-41b3-afb7-04b24790dd2d",isExists:true,name:"0128977.jpg",path:"https://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2018/1/31/92341685.jpg"
                }
            ],
            [
                {id:"4f827cc4-4c32-41b3-afb7-04b24790dd2d",isExists:true,name:"0121967.jpg",path:"https://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2018/1/31/92341685.jpg"}
            ],
            [
                {id:"1122333-4c32-41b3-afb7-04b24790dd2d",isExists:true,name:"01dss.jpg",path:"https://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2018/1/31/92341685.jpg"},
                {id:"2122333-4c32-41b3-afb7-04b24790dd2d",isExists:true,name:"dsdss.jpg",path:"https://sinostoragedev.oss-cn-hangzhou.aliyuncs.com/upload/2018/1/31/95311978.jpg"}
            ]
        ]


this.receiptshow = true;

在index.html文件加mdn

    <link href="https://cdn.bootcss.com/viewerjs/1.0.0-beta.1/viewer.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/viewerjs/1.0.0-beta.1/viewer.js"></script>

回单效果.png

效果.png

在typescript中没用能够按照viewerjs上的GitHub指示来实现，故直接在index.html文件中引用了静态资源库的链接来实现效果。
但是在纯vue文件引用编写时却能够正常实现。

参考文档：https://github.com/fengyuanchen/viewerjs