更新记录

3.0.0（2024-11-18） 下载此版本

1、新增操作工具 2、新增多图滚动展示功能

2.0.0（2023-07-11） 下载此版本

1、新增工具、尺寸参数

1.1.0（2022-07-22） 下载此版本

1、更改为本地引入js文件方式

平台兼容性

关于yuanzhen-dcmView插件(组件)的使用说明

1、该插件为个人开发者开发，为原创组件。

2、该插件的注释十分详细，有兴趣的开发者可以看看。

3、此为第二版本，以后会不定期更新。

4、关于组件相关，也会在我的个人博客详细介绍，博客地址：https://www.cnblogs.com/bokemoqi/p/16516192.html

5、该版本组件许可协议为：MIT协议

注意：插件调用方法，需要引入，注册。

一、基本使用方法如下：

<template>
    <view>
        <dcmview :baseUrl="baseUrl" :imgurl="imgurl" :imgArr="imgArr" :toolType="toolType" width="750rpx" height="1000rpx"> </dcmview>
    </view>
</template>
<script>
    //引入组件
    import dcmview from '../../components/yuanzhen-dcmView/dcmview.vue'
    export default {
        //注册组件
        components:{
            dcmview
        },
        data() {
            return {
                baseUrl:"http://192.168.124.75:8080", //仅当需要显示多个图片滚动查看时传值，查看单张DCM时不需要传值
                imgArr:['IMG-0017-00044.dcm','IMG-0017-00046.dcm','IMG-0017-00054.dcm'], //当需要显示多个图片滚动查看时传字符串数组，查看单张DCM时不需要传值
                imgurl:'http://192.168.124.75:8080/IMG-0017-00044.dcm', //传值，传dcm图片地址给<dcmview>组件
                toolType:"Bidirectional"   //工具传值，根据传值绑定不同工具
            }
        }   
    }
</script>

二、参数说明：

组件现分为两中查看DCM图片模式：单张图查看模式、多张图查看模式。两种查看模式的区别如下：

单张图查看模式：

• 只可以一次查看一张图片，可以绑定toolType工具参数对图片进行操作。
• 只可以使用imgurl、toolType、width、height参数。

多张图查看模式：

• 可以按住鼠标左键上下移动来查看imgArr参数中传入的所有dcm图片。
• 只可以使用baseUrl、imgArr、width、height参数。

toolType参数值：

三、关于跨域问题解决方案

若在你使用该插件时遇到跨域问题，可参考以下方案进行解决：

方案一：如果你在本地使用http-server启动的本地服务器服务，你可以把启动命令更改为http-server --cors(注意空格)，就可以解决本地跨域问题。

方案二：在uniapp中进行配置。首先打开manifest.json文件并查看源码视图，在源码视图中加入如下配置内容：

"h5": {
        "devServer": {
            "port": 8080, //浏览器运行端口
            "disableHostCheck": true, //设置跳过host检查
            "proxy": {
             "/api": {
                    "target": "http://localhost:8081", //目标接口api域名
                    "changeOrigin": true, //是否跨域
                    "secure": false, // 设置支持https协议的代理
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    }

如仍存在跨域问题可通过nginx代理等方式解决。

至此，即可解决跨域问题。若仍无法解决，请后端进行解决跨域即可！