单页多次复用Vue自定义日期选择器时jQuery滚动逻辑仅对首个组件生效

DevOps 小满

2026-9-30

问题根因

你的逻辑失效核心原因是使用了全局类选择器，jQuery执行时会匹配页面所有符合类名的元素，默认只会对第一个匹配到的元素执行操作，同时全局绑定的事件也无法和每个组件实例对应，导致多组件复用时只有第一个生效。

解决方案

把所有jQuery逻辑移到Vue组件的生命周期钩子内，通过组件实例的$el属性限定DOM操作范围，仅操作当前组件内的元素即可。
首先删除你原本全局写的两段jQuery代码，再在Vue组件中添加如下逻辑：

export default {
  // 保留你组件原有data、methods等原有逻辑不变
  mounted() {
    // 限定DOM查找范围仅为当前组件内部
    const $componentEl = $(this.$el)
    const $years = $componentEl.find('.years')
    const $months = $componentEl.find('.months')
    const $days = $componentEl.find('.days')

    // 组件渲染完成后初始化滚动到选中项
    $years.scrollTop($years.scrollTop() + $years.find('.active').position().top - 150)
    $months.scrollTop($months.scrollTop() + $months.find('.active').position().top - 150)
    $days.scrollTop($days.scrollTop() + $days.find('.active').position().top - 150)

    // 仅给当前组件内的天数列绑定点击滚动事件
    $days.on('click', 'p', function() {
      const $parent = $(this).parent()
      $parent.scrollTop($parent.scrollTop() + $(this).position().top - 150)
    })
  },
  beforeDestroy() {
    // 组件销毁前解绑事件，避免内存泄漏
    $(this.$el).find('.days').off('click', 'p')
  }
}