vue.js 绑定body

export default {
  mounted() {
    // 给body添加事件监听器
    document.body.addEventListener('click', this.handleBodyClick);

    // 修改body的样式
    document.body.style.backgroundColor = 'lightblue';
  },
  beforeUnmount() {
    // 在组件销毁前移除事件监听器
    document.body.removeEventListener('click', this.handleBodyClick);

    // 恢复body的样式
    document.body.style.backgroundColor = '';
  },
  methods: {
    handleBodyClick(event) {
      console.log('Body clicked!', event);
    }
  }
};

// eventBus.js
import { createApp } from 'vue';
const EventBus = createApp({});
export default EventBus.config.globalProperties.$bus = new Vue();

// 在需要监听body事件的组件中
export default {
  mounted() {
    this.$bus.$on('body-event', this.handleBodyEvent);
  },
  beforeUnmount() {
    this.$bus.$off('body-event', this.handleBodyEvent);
  },
  methods: {
    handleBodyEvent(data) {
      console.log('Body event received!', data);
    }
  }
};

// 在需要触发body事件的组件或者main.js中
document.body.addEventListener('click', (event) => {
  app.config.globalProperties.$bus.$emit('body-event', event);
});

/* 在全局CSS中定义变量 */
:root {
  --body-background-color: white;
}

body {
  background-color: var(--body-background-color);
}

// 在Vue组件中改变CSS变量
export default {
  mounted() {
    document.documentElement.style.setProperty('--body-background-color', 'lightblue');
  },
  beforeUnmount() {
    document.documentElement.style.setProperty('--body-background-color', 'white');
  }
};