vue中自定义OpenSeadragon插件的工具栏

        OpenSeadragon是一个可以显示多层图片（可放大缩小）的Web库，基于JavaScript，支持桌面和手机，主要用于地图、医学图像等需要放大缩小分层显示的图像的显示。OpenSeadragon为我们提供了现成的工具条toolBar，工具条上有按钮，可以默认实现放大、缩小、全屏、返回默认大小等功能，官方文档：OpenSeadragon

但我们的项目中工具条的样式与官网所提供的样式不符，今天我们就来谈谈如何自定义工具条，并绑定上相对应的功能。

下文项目中工具条功能主要用到放大、缩小、返回默认、全屏功能。

        要实现的功能为工具条位于容器的右侧，并纵向排列，工具条的图表也是自定义图标实现步骤

1.首先在页面中添加自定义工具条

2.配置自定义工具条

options: {
					id: "contentDiv",
					toolbar: "toolbarDiv",
					prefixUrl: "images/", //host   "https://openseadragon.github.io/openseadragon/images/"
					constrainDuringPan: false,
					showNavigator: false, // 展示导航图
					autoHideControls: false,
					// sequenceMode: true, 
					// showReferenceStrip: true,
					// referenceStripScroll: 'vertical',
					zoomInButton: "zoom-in", //放大
					zoomOutButton: "zoom-out", //缩小
					homeButton: "home", //恢复默认
					fullPageButton: "full-page", //全屏
				}, // openseadragon 参数配置

3.修改样式 

图中自定义图标按需使用自己的即可，样式使用定位，一定要添加权重z-index，不然无法实现功能，到此就实现了