Vue3条件类覆盖其他类：如何保留Leaflet添加的容器类？

问题根源在于Vue的:class绑定机制：Vue会通过虚拟DOM维护元素的类列表，仅保留模板中声明的静态类和动态生成的类。而Leaflet是直接操作DOM为容器添加类，这些类不在Vue的跟踪范围内，当条件变化触发Vue更新类列表时，就会被一并清除。

下面是两种可靠的解决方法：

方法一：手动通过DOM操作控制自定义类 #

绕过Vue的类绑定，直接监听缩放级别变化，用原生DOM的classList方法添加/移除自定义类，完全不干扰Leaflet添加的类。

示例代码：

<template>
  <!-- 用ref获取容器元素，比getElementById更符合Vue实践 -->
  <div ref="mapContainer" id="map"></div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import L from 'leaflet'

const mapContainer = ref(null)
const zoomLevel = ref(0)

// 初始化Leaflet地图
const initMap = () => {
  const map = L.map(mapContainer.value).setView([51.505, -0.09], 13)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)
  
  // 监听地图缩放结束事件，同步zoomLevel值
  map.on('zoomend', () => {
    zoomLevel.value = map.getZoom()
  })
}

// 监听zoomLevel变化，手动控制自定义类
watch(zoomLevel, (newZoom) => {
  if (newZoom >= 7) {
    mapContainer.value.classList.add('zoom-close')
  } else {
    mapContainer.value.classList.remove('zoom-close')
  }
})

// 组件挂载后初始化地图
onMounted(() => {
  initMap()
})
</script>

方法二：使用自定义指令封装类控制逻辑 #

如果需要在多个组件复用这个逻辑，可以封装成Vue自定义指令，代码更模块化：

<template>
  <div id="map" v-zoom-class:7="zoomLevel"></div>
</template>

<script setup>
import { ref, onMounted, directive } from 'vue'
import L from 'leaflet'

// 定义自定义指令v-zoom-class
const vZoomClass = directive('zoom-class', {
  mounted(el, binding) {
    // binding.arg是阈值（这里是7），binding.value是当前缩放级别
    if (binding.value >= binding.arg) {
      el.classList.add('zoom-close')
    }
  },
  updated(el, binding) {
    // 仅在缩放级别变化时更新类
    if (binding.oldValue !== binding.value) {
      if (binding.value >= binding.arg) {
        el.classList.add('zoom-close')
      } else {
        el.classList.remove('zoom-close')
      }
    }
  }
})

const zoomLevel = ref(0)

// 初始化地图并监听缩放
onMounted(() => {
  const map = L.map('map').setView([51.505, -0.09], 13)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)
  
  map.on('zoomend', () => {
    zoomLevel.value = map.getZoom()
  })
})
</script>

这两种方法都能确保Vue只操作我们自定义的zoom-close类，完全保留Leaflet自动添加的所有类。

内容的提问来源于stack exchange，提问作者wortwart