Vue设置body样式|极客教程

Vue设置body样式

在Vue项目中，我们通常会通过在组件中设置样式来美化页面的展示效果。但有时候我们也需要对整个页面的body元素进行一些样式设置，这时就需要在Vue中动态地修改body的样式。

方法一：通过Vue组件

一种修改body样式的方法是在Vue组件中使用mounted生命周期钩子来设置body的样式。我们可以在组件的mounted生命周期钩子中通过操作DOM来动态修改body的样式。

<template>
  <div>
    <p>这是一个Vue组件</p>
  </div>
</template>

<script>
export default {
  mounted() {
    document.body.style.backgroundColor = 'lightblue';
    document.body.style.fontFamily = 'Arial';
  }
}
</script>

在上面的示例中，我们在组件的mounted生命周期钩子中动态地修改了body的背景颜色和字体。

方法二：通过Vue插件

另一种修改body样式的方法是通过Vue插件来设置。我们可以编写一个Vue插件，在插件中修改body的样式，并将插件注册到Vue实例中。

// bodyPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$setBodyStyle = function(styles) {
      Object.keys(styles).forEach(key => {
        document.body.style[key] = styles[key];
      });
    }
  }
}

然后在main.js中引入并注册该插件：

// main.js
import Vue from 'vue';
import App from './App.vue';
import bodyPlugin from './plugins/bodyPlugin';

Vue.use(bodyPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

最后，在任意Vue组件中通过this.$setBodyStyle方法调用插件来设置body的样式：

<template>
  <div>
    <button @click="changeBodyStyle">修改body样式</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeBodyStyle() {
      this.$setBodyStyle({
        backgroundColor: 'lightblue',
        fontFamily: 'Arial'
      });
    }
  }
}
</script>