1. Python技术站首页
  2. css

vue-element换肤所有主题色和基础色均可实现自主配置

• css

实现vue-element-admin换肤功能一般分为以下几个步骤：

  1. 安装依赖
npm install --save-dev style-resources-loader
  1. 配置less变量及全局样式

在src/styles/variables.scss中定义仪表盘样式，如下：

@import '~element-theme-chalk/src/index'; // 引入所有 less 变量

// Dashboard Theme
$--color-primary: #13ce66;
$--color-success: #13ce66;
$--color-warning: #f7ba2a;
$--color-error: #ff4949;

$--color-breadcrumb: #c4c4cc;

// navmenu active color
$--color-nav-menu-active-text: #13ce66;
$--color-nav-menu-active-bg: #e4f7ff;

// css overrides
$--color-body-background-color: #f5f6fa;
$--color-scrollbar-background-color: '#eff2f6';
$--color-scrollbar-thumb-background-color: '#c5c8ce';
$--color-scrollbar-hover-thumb-background-color: '#a2a6ad';

// App Layout variables overrides
$--header-height: 60px;
$--menu-text-color: #57627B;
$--menu-text-color-active: #13ce66;
$--menu-background-color: #fff;
$--menu-width: 260px;
$--menu-collapse-width: 80px;
$--menu-item-height: 42px;

// overwrite font family after loading fonts
$--font-family: 'Noto Sans SC', 'sans-serif';

然后在src/styles/index.scss中引入上述变量，并通过vue.config.js配置文件全局注入样式：

@import './variables.scss';

// add global css
* {
  margin: 0;
  padding: 0;
}

.app-container {
  width: 100%;
  height: 100%;
}

.wf-sans-serif {
  font-family: 'Noto Sans SC', 'sans-serif' !important;
}

.shopville-header {
  height: $--header-height;
  background-color: $--color-primary;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo {
    width: 100px;
    height: $--header-height;
    display: flex;
    align-items: center;
    padding-left: 24px;

    img {
      width: 100%;
    }
  }

  .userinfo {
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    cursor: pointer;

    img {
      width: 100%;
    }
  }

  .username {
    font-size: 14px;
    font-weight: 600;
  }
}

@media (max-width: 768px) {
  .shopville-header {
    .userinfo {
      display: none;
    }
  }
}

// override element-ui css
.el-dropdown-menu__item {
  font-size: 14px;
}

.el-dropdown-menu__item-group.title {
  font-size: 14px;
  padding: 12px 12px 8px 12px !important;
}

.el-menu::after,
.el-submenu::after {
  border-bottom: none;
}

.el-menu {
  width: $--menu-width;
  text-align: center;
  background-color: $--menu-background-color !important;
  .el-menu-item {
    height: $--menu-item-height;
    line-height: $--menu-item-height;
    font-size: 14px;
    color: $--menu-text-color;
  }
  .el-menu-item:hover {
    background-color: $--menu-collapse-background-color !important;
    color: $--menu-text-color-active !important;
  }
  .el-menu-item.is-active {
    color: $--menu-text-color-active !important;
    font-weight: bold;
    background-color: $--menu-collapse-background-color !important;
  }
  .el-submenu__title {
    line-height: $--menu-item-height;
    font-size: 14px;
    color: $--menu-text-color;
  }
}
.el-menu--collapse {
  width: $--menu-collapse-width;
  .el-menu-item {
    line-height: $--menu-item-height;
    font-size: 14px;
    margin: 0 auto;
  }
  .el-menu-item:hover {
    background-color: $--menu-collapse-background-color !important;
  }
  .el-menu-item.is-active,
  .el-menu-item:hover {
    background-color: $--menu-collapse-background-color !important;
    color: $--menu-text-color-active !important;
  }
  .el-submenu__title {
    line-height: $--menu-item-height;
    font-size: 14px;
    margin: 0 auto;
  }
}

配置vue.config.js

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: false,
  // 配置全局 less 变量
  css: {
    loaderOptions: {
      less: {
        prependData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@layouts', resolve('src/layouts'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@views', resolve('src/views'))
      .set('@utils', resolve('src/utils'))
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/styles/variables.scss')]
    }
  }
}
  1. 自定义换肤
|-- public
|-- src
|   |-- styles
|       |-- index.scss
|       |-- variables.scss
|   |-- components
|       |-- ThemePicker.vue
|-- vue.config.js

在src/components目录下新建ThemePicker.vue组件:

<template>
  <color-picker
    v-model="color"
    format="hex"
    disabled-alpha
    size="small"
    color-format-input
    popper-append-to-body
    @change="handleChangeColor"
  >
    <div class="color-picker-btn">
      <span class="color-picker-btn-color" :style="{ backgroundColor: color }"></span>
    </div>
  </color-picker>
</template>

<script>
import { ColorPicker } from 'element-ui'

export default {
  components: {
    ColorPicker
  },

  data() {
    return {
      color: ''
    }
  },

  mounted() {
    this.color = this.getThemeColor()
  },

  methods: {
    getThemeColor() {
      return localStorage.getItem('themeColor') || '#13ce66'
    },

    setThemeColor(color) {
      localStorage.setItem('themeColor', color)
      window.$eventBus.$emit('themeChange')
    },

    handleChangeColor() {
      this.setThemeColor(this.color)
    }
  }
}
</script>

<style scoped>
.color-picker-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;

  .color-picker-btn-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>

在src/App.vue中加入自定义换肤标签:

<template>
  <div class="app-container">
    <div class="shopville-header">
      <div class="logo">
        <img src="@/assets/images/logo.png" />
      </div>
      <div class="userinfo">
        <theme-picker />
        <a-dropdown>
          <a-avatar class="avatar" icon="user">
            <img
              slot="avatar"
              src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
              alt=""
            />
          </a-avatar>
          <a-menu slot="overlay">
            <a-menu-item>
              <a-icon :type="$route.meta.icon" />
              <span>我的工作台</span>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item>
              <a-icon type="logout" />
              <span>退出登录</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <app-main />
  </div>
</template>

<script>
import ThemePicker from './components/ThemePicker.vue'

export default {
  components: {
    ThemePicker
  },
  created() {
    this.changeThemeColor()
  },
  methods: {
    changeThemeColor() {
      const $primaryColor = localStorage.getItem('themeColor') || '#13ce66'

      const cssText = `
      :root {
        --color-primary: ${$primaryColor};
        --color-success: ${$primaryColor};
      }

      .el-table__body {
        font-size: 14px;
      }`

      const styleEle = document.createElement('style')
      styleEle.id = 'global_theme'
      styleEle.innerText = cssText
      document.head.append(styleEle)
    }
  }
}
</script>

示例说明1：

以element-theme-chalk主题为例，我们可以在src/styles/variables.scss文件中自定义 主题颜色和元素颜色。

@import '~element-theme-chalk/src/index'; // 引入所有 less 变量
// 定义主题色
$--color-primary: #13ce66;
$--color-success: #13ce66;
$--color-warning: #F7BA2A;
$--color-error: #FF4949;

// 定义元素颜色
$--color-breadcrumb: #c4c4cc;

示例说明2：

自定义换肤，我们可以在src/components/目录下新建一个ThemePicker.vue组件来选择自己喜欢的颜色。然后在src/App.vue中使用此组件，并监听localStorage的变化，在主题颜色改变时重新渲染页面。

<template>
  <color-picker
    v-model="color"
    format="hex"
    disabled-alpha
    size="small"
    color-format-input
    popper-append-to-body
    @change="handleChangeColor"
  >
    <div class="color-picker-btn">
      <span class="color-picker-btn-color" :style="{ backgroundColor: color }"></span>
    </div>
  </color-picker>
</template>

<script>
import { ColorPicker } from 'element-ui'

export default {
  components: {
    ColorPicker
  },

  data() {
    return {
      color: ''
    }
  },

  mounted() {
    this.color = this.getThemeColor()
  },

  methods: {
    getThemeColor() {
      return localStorage.getItem('themeColor') || '#13ce66'
    },

    setThemeColor(color) {
      localStorage.setItem('themeColor', color)
      window.$eventBus.$emit('themeChange')
    },

    handleChangeColor() {
      this.setThemeColor(this.color)
    }
  }
}
</script>

<style scoped>
.color-picker-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;

  .color-picker-btn-color {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
</style>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-element换肤所有主题色和基础色均可实现自主配置 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • zTree v3.5 Css分解与dom结构说明

    zTree是一款非常流行的树形控件，通过CSS样式控制树形结构的显示，但是有时候样式比较复杂，不容易理解。因此了解zTree的CSS分解和DOM结构对于深入学习和应用zTree非常有帮助。 1. CSS分解 1.1 基础CSS样式 zTree中的基本样式可以通过以下css控制： .ztree {} .ztree li {} .ztree li ul {} .…

    css 2023年6月10日
    00

  • css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过

    要实现CSS固定表头并支持拖动滚动条时，对应表头所对应的列可以通过一些技巧实现，以下是攻略： 一、HTML结构 首先要构建具有类似表格结构的HTML代码，其中包含固定的表头和可滚动的内容区域。可以采用如下结构实现： <div class="table-container"> <table> <thead&gt…

    css 2023年6月10日
    00

  • div+css布局中选择使用html标签的方法

    在div+css布局中，选择使用HTML标签的方法，可以通过以下步骤实现： 定义HTML结构 首先，在HTML结构中，需要定义好所需的顶级div元素，并赋予其想要的布局特性，如width、height、position、display等。其次，在这个top-level div中，我们可以使用多个内嵌的div标签，来组合成想要的布局形式。 利用CSS样式进行布…

    css 2023年6月9日
    00

  • 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

    下面是 “轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮”的完整攻略： 创建菜单 EasyUI提供了$menu()方法可以创建一个菜单组件。下面是一个示例： $(‘#menu’).menu({ onClick:function(item){ alert(item.name); } }); 在上面的代码中，选择器 “$(‘#menu’)” 用…

    css 2023年6月10日
    00

  • 怎么完美激活Coffeecup HTML Editor?附激活教程+激活补丁下载

    完美激活Coffeecup HTML Editor攻略 Coffeecup HTML Editor是一款优秀的HTML编辑器，但是官方版需要购买才能获得完整功能。下面我们将讲解如何在不需要购买的情况下完美激活该软件。 激活教程 下载Coffeecup HTML Editor安装包和激活补丁 Coffeecup HTML Editor安装包下载地址：https…

    css 2023年6月11日
    00

  • 基于JavaScript 实现拖放功能

    下面是基于JavaScript实现拖放功能的攻略： 一、前置知识 HTML基础知识 CSS基础知识 JavaScript基础知识 二、实现拖放 首先，在HTML中创建一个元素，作为可拖动的源元素。例如： <div id="drag-elem" draggable="true">这是一个可拖动的元素</…

    css 2023年6月10日
    00

  • 10个实用的CSS属性小结

    下面是详细的讲解“10个实用的CSS属性小结”的完整攻略： 10个实用的CSS属性小结 1. box-sizing box-sizing属性用于设置元素的盒子模型，决定元素的内、外边距是否包含在元素的宽度和高度之内，默认值为content-box。合理使用box-sizing属性不仅能简化元素的排版，还能够提高页面的性能。 .example { box-si…

    css 2023年6月9日
    00

  • css如何绘制特殊图形的方法示例

    下面我将详细讲解一下 “CSS 如何绘制特殊图形的方法示例” 的攻略。 CSS 绘制特殊图形方法 1. 利用 border 属性绘制三角形 通过设置元素的 border 属性，可以轻松绘制三角形。 .triangle{ width: 0; height: 0; border: 50px solid transparent; border-top-color:…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部