jeecg框架修改默认的白色背景

最新推荐文章于 2024-03-14 12:13:06 发布

Ciito

最新推荐文章于 2024-03-14 12:13:06 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue jeecgboot

本文链接：https://blog.youkuaiyun.com/weixin_45672928/article/details/134177528

文章介绍了如何在Jeecg框架中通过创建名为GreyBackground的组件，修改默认的白色背景颜色，使用less样式实现背景色切换。组件在挂载时会添加特定类以改变`.layout-content`的背景，并在销毁时移除该类以恢复原背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jeecg框架修改默认的白色背景

原背景
一个组件解决更换背景色

<template>
  <div class="main-warp">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'GreyBackground',
  data() {
    return {}
  },
  computed: {},
  watch: {},
  beforeDestroy() {
    this.getLayoutContent().classList.remove('common-grey')
  },
  mounted() {
    this.setBackground() // 重置.global-layout-wrapper .layout-content背景色
  },
  methods: {
    getLayoutContent() {
      return document.querySelector('.layout-content')
    },
    setBackground() {
      this.getLayoutContent().classList.add('common-grey')
    }
  }
}
</script>
<style lang="less">
.common-grey {
  background-color: #f0f2f5 !important;
  padding: 0 !important;
}
</style>
<style lang="less" scoped>
.main-warp {
  width: 100%;
  height: 100%;
}
</style>