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

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

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

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

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

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

<template>
	<div style="width: 100%;height: 100%;">
        // 自定义工具条
		<div id="toolbarDiv" style="width:100%;height: 300px;">
			<div>
				<div id="zoom-in"></div>
				<div id="zoom-out"></div>
				<div id="home"></div>
				<div id="full-page"></div>
			</div>
		</div>
		<div id="contentDiv" style="width: 100%;height: 100%;"></div>
	</div>
</template>

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.修改样式 

<style scoped lang="scss">
	.contentDiv {
		width: 100%;
		height: 100%;
	}
	#toolbarDiv{
		position: absolute!important;
	}
	#zoom-in {
		width: 50px;
		height: 50px;
		background: url(../assets/testcenter/fangda.png)no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20px;
		position: absolute !important;
		top: 30px;
		right: 43px;
		z-index: 999;
	}

	#zoom-out {
		width: 50px;
		height: 50px;
		background: url(../assets/testcenter/suoxiao.png)no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20px;
		position: absolute !important;
		top: 100px;
		right: 43px;
		z-index: 999;
	}

	#home {
		width: 50px;
		height: 50px;
		background: url(../assets/testcenter/moren.png)no-repeat;
		background-size: 100% 100%;
		margin-bottom: 20px;
		position: absolute !important;
		top: 170px;
		right: 43px;
		z-index: 999;
	}

	#full-page {
		width: 50px;
		height: 50px;
		background: url(../assets/testcenter/quanping.png)no-repeat;
		background-size: 100% 100%;
		position: absolute !important;
		top: 240px;
		right: 43px;
		z-index: 999;
	}
</style>

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