Vue 中使用消息总线让两个滚动条同步滚动

最新推荐文章于 2025-11-12 11:05:42 发布

原创最新推荐文章于 2025-11-12 11:05:42 发布 · 1.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

该博客介绍了如何在Vue应用中实现两个子组件间的滚动条同步滚动。通过创建一个消息总线(EventBus)来实现组件间的通信，并设置一个标志位来避免滚动事件的互斥处理。在滚动组件上监听滚动和鼠标悬停事件，更新标志位并触发滚动同步。

最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动

这就涉及到子组件之间的互相通信，通过消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥

store.js

import Vue from 'vue'
export let store = Vue.observable({ 
  scrollFlag: true
})
export let mutations = {
    //纵向滚动条同步事件互斥标志位
    setScrollFlag(scrollFlag) {
      store.scrollFlag = scrollFlag
    },
}

建立一个消息总线的 js 文件

EventBus.js

import Vue from 'vue'
export const EventBus = new Vue()

左边的滚动组件

<template>
  <div ref='taskContent' class="content" @scroll="scroll()" @mouseover="mouseover()">
  </div>
</template>
<script>
import { store } from '@/components/gantt/store.js'
import { EventBus }  from '../EventBus.js'
import { mutations } from '@/components/gantt/store.js'
export default {
	data() {
	  return {
        scrollFlag: true
      };
	},
	watch: {
    scrollFlag: function (newVal) {
        this.setScrollFlag(newVal)
    },
  },
  mounted() {
    EventBus.$on('scroll',(scrollTop) => {
      this.$refs.taskContent.scrollTop = scrollTop
    })
	},
	methods: {
    setScrollFlag: mutations.setScrollFlag,
    scroll() {
      if(!this.scrollFlag) {
        EventBus.$emit('scroll',this.$refs.taskContent.scrollTop)
      }
    },
    mouseover() {
      this.scrollFlag = false
    }
  }
}

右边的滚动条组件

<template>
  <div ref='barContent' @scroll="scroll()" @mouseover="mouseover()">
  </div>
</template>
import { store } from '@/components/gantt/store.js'
import { EventBus }  from './EventBus.js'
import { mutations } from '@/components/gantt/store.js'
export default {
  data() {
	return {
      scrollFlag: true
    }
  },
  watch: {
    scrollFlag: function (newVal) {
        this.setScrollFlag(newVal)
    },
  },
  mounted() {
    EventBus.$on('scroll',(scrollTop) => {
      this.$refs.barContent.scrollTop = scrollTop
    })
	},
  methods: {
    setScrollFlag: mutations.setScrollFlag,
    scroll() {
      if(this.scrollFlag) {
        EventBus.$emit('scroll',this.$refs.barContent.scrollTop)
      }
    },
    mouseover() {
      this.scrollFlag = true
    }
  }
}

以上代码比较好理解，所以没有写什么注释，应该很好懂的

标签

#vue.js #前端 #javascript