效果图：支持鼠标滚动放大缩小，拖动，自定义设置放大倍数，全屏预览等。
完整代码：
<template><div class="container"><!-- 注意这里使用 ref 而不是 id --><div ref="openSeadragonContainer" class="openseadragonContainer"></div><div ref="navigatorDiv" class="navigator"></div><view class="xList"><view class="xItem" :class="item.val==scale?'xIIn':'xINo'" v-for="(item,idx) in xList" :key="idx"><view @click="changeX(item)">{{item.name}}</view></view></view><view class="progressBlock p_r"><view class="jian" @click="jian">-</view><u-slider class="slider" disabled :height="20" :min="1" :max="maxZoomLevel" :step="1"v-model="scale"></u-slider><view class="jia" @click="jia">+</view><view class="tips">{{scale}}X</view></view></div>
</template>
<script>import OpenSeadragon from '@/static/openseadragon.min.js';export default {props: {width: {type: String,default: '300px',},imageUrl: {type: String,required: true,},},data() {return {navigatorId: `navigator-${Math.random().toString(36).substr(2, 9)}`,maxZoomLevel: 100,scale: 1,qiuLeft: 1,percent: 0,translateX: 0,translateY: 0,dragging: false,startX: 0,startY: 0,initialX: 0,initialY: 0,xList: [{val: '5',name: '5X'}, {val: '10',name: '10X'}, {val: '20',name: '20X'}, {val: '40',name: '40X'}, ]};},watch: {imageUrl: {immediate: true,handler() {this.$nextTick(() => {this.initOpenSeadragon();});},},},mounted() {this.$nextTick(() => {this.initOpenSeadragon();});},methods: {jia() {console.log('jia', this.scale);if (this.scale < 100) {this.scale = this.scale + 1this.setZoomLevel(this.scale)}},jian() {console.log('jian', this.scale);if (this.scale > 1) {this.scale = this.scale - 1this.setZoomLevel(this.scale)}},changeX(item) {console.log('changeX', item.val);this.scale = item.val;this.setZoomLevel(this.scale)},setZoomLevel(level) {if (this.viewer) {this.viewer.viewport.zoomTo(level);}},destroyViewer() {if (this.viewer) {this.viewer.destroy();this.viewer = null;}},initOpenSeadragon() {this.destroyViewer();this.viewer = OpenSeadragon({element: this.$refs.openSeadragonContainer, // 指定显示的 divprefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/5.0.0/images/",tileSources: this.imageUrl,minZoomImageRatio: 1,maxZoomPixelRatio: 1.2,immediateRender: true,visibilityRatio: 1,defaultZoomLevel: 1,homeFillsViewer: false,preserveViewport: true,viewportMargins: {top: 10,left: 10,right: 10,bottom: 10},loadTilesWithAjax: true,ajaxHeaders: {"Cache-Control": "no-cache"},timeout: 180000,placeholderFillStyle: "#000",blendTime: 0,maxImageCacheCount: 500,imageLoaderLimit: 10,crossOriginPolicy: false,navigatorId: this.$refs.navigatorDiv.id,showNavigator: true, // 显示导航navigatorHeight: "100px",navigatorWidth: "150px",// navigatorSizeRatio: 0.2,navigatorAutoFade: false,// navigatorMaintainViewport: true,});console.log('OpenSeadragon this.viewer:', this.navigatorId); // 添加调试日志this.viewer.addHandler('open', () => {var viewport = this.viewer.viewport;viewport.zoomTo(viewport.getHomeZoom(), null, true);viewport.goHome(true);// this.updateScale(); // 确保更新缩放比例和中心坐标});// 监听 zoom 事件this.viewer.addHandler('zoom', (event) => {let scale = this.viewer.viewport.getZoom();this.scale = parseFloat(scale.toFixed(0))});// 添加错误处理this.viewer.addHandler('tile-load-failed', function(event) {console.error('Tile load failed:', event);});},},beforeDestroy() {if (this.viewer) {this.viewer.destroy(); // 销毁 viewer 实例}},};
</script><style lang="less" scoped>.openseadragonContainer {width: 100%;height: 550px;// background: red;}.navigator {position: absolute;right: 0;top: 0;width: 200px;height: 120px;}.container {width: 100%;height: 550px;display: flex;flex-direction: column;align-items: center;border-radius: 10px;border: 1px solid #04A8A3;position: relative;}.xList {position: absolute;bottom: 30px;left: 20px;cursor: grabbing;.xItem {border-radius: 50%;width: 70rpx;height: 70rpx;font-size: 30rpx;margin-bottom: 14px;justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/display: -webkit-flex;}.xIIn {background: #fff;border: 1px solid #04A8A3;color: #04A8A3;}.xINo {border: 1px solid #04A8A3;color: #04A8A3;}}.movable-area {width: 100%;height: 100%;position: relative;overflow: scroll;}.image {user-select: none;width: 100%;background: #f0f0f0;// height: 100px;}.progressBlock {position: absolute;bottom: 50px;width: 300px;left: 30%;z-index: 999;.slider {width: 200px;height: 20rpx;}.tips {color: #c1c1c1;font-size: 30rpx;position: absolute;left: 250rpx;top: 40rpx;}.jia {width: 60rpx;height: 60rpx;margin-left: 20rpx;border: 1px solid #04A8A3;background: #fff;color: #04A8A3;justify-content: center;align-items: center;display: -webkit-flex;margin-top: -20rpx;}.jian {width: 60rpx;height: 60rpx;margin-right: 20rpx;border: 1px solid #04A8A3;background: #fff;color: #04A8A3;justify-content: center;align-items: center;display: -webkit-flex;margin-top: -20rpx;}}.controls {position: absolute;bottom: 50px;display: flex;flex-direction: row;justify-content: space-around;width: 80%;left: 10%;}button {padding: 10px;margin: 0 5px;}
</style>