<global-monitoring :device="truckNum" view-mode="3D" style="height: calc(100vh - 112px);width:100%" ref="retrospect" @complete="handleComplete" ></global-monitoring> <div class="smallMap"> <mapbox ref="smallMap" :zoom="0" containerId="smallMap" screen-button> </mapbox> <div class="zoom" click="amplifier"></div> </div> .smallMap{ width: 900px; height: 310px; margin-top: 20px; position: absolute; transform: scale(0.3); transform-origin: left; left: 0; bottom: 0; z-index: 1000; .zoom{ width: 30px; height: 30px; padding: 5px; border-radius: 2px; background-color: rgba(187, 208, 225, 0.8); z-index: 200; background: rgba(187, 208, 225, 0.8) url("~@/assets/img/suofang.png") no-repeat center; position: absolute; top: 2px; right: 2px; } } 点击amplifier时 global-monitoring标签样式与<div class="smallMap">标签样式互换

你可以在点击 "amplifier" 时，通过动态修改样式来实现 global-monitoring 标签与 <div class="smallMap"> 标签的互换。以下是一个示例代码，供你参考：

methods: {
  amplifier() {
    // 交换 global-monitoring 和 <div class="smallMap"> 的样式
    const globalMonitoring = this.$refs.retrospect.$el;
    const smallMap = this.$refs.smallMap;
    const tempStyle = globalMonitoring.getAttribute("style");
    
    globalMonitoring.setAttribute("style", smallMap.getAttribute("style"));
    smallMap.setAttribute("style", tempStyle);
  }
}

你可以将这段代码添加到你的 Vue 组件中，然后在点击 "amplifier" 的事件处理函数中调用 `this.amplifier()` 方法。这样，当点击 "amplifier" 时，global-monitoring 标签和 <div class="smallMap"> 标签的样式就会互相交换。记得根据你的实际情况修改代码中的 DOM 元素引用和样式属性。