vue + elementUI实现换肤，web开发小工具

在Vue中实现换肤功能，可以通过修改全局CSS变量实现。Element UI本身不提供换肤功能，但你可以通过修改Element UI的样式或者覆盖其默认样式来实现换肤。

以下是一个简单的例子，展示如何在Vue项目中使用Element UI实现换肤功能：

1. 定义主题色和背景色的CSS变量。

:root {
  --primary-color: #409EFF; /* 默认主题色 */
  --skin-background-color: #FFFFFF; /* 默认背景色 */
}
 
.skin-container {
  background-color: var(--skin-background-color) !important;
}
 
.el-button--primary {
  background-color: var(--primary-color);
}

2. 创建换肤组件，并添加换肤逻辑。

<template>
  <div>
    <el-button @click="changeSkin('blue')">蓝色皮肤</el-button>
    <el-button @click="changeSkin('pink')">粉色皮肤</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    changeSkin(skin) {
      if (skin === 'blue') {
        document.documentElement.style.setProperty('--primary-color', '#1890FF');
        document.documentElement.style.setProperty('--skin-background-color', '#ECF5FF');
      } else if (skin === 'pink') {
        document.documentElement.style.setProperty('--primary-color', '#F53F7E');
        document.documentElement.style.setProperty('--skin-background-color', '#FFF0F5');
      }
    }
  }
}
</script>

在这个例子中，我们定义了两种皮肤颜色，蓝色和粉色，通过修改CSS变量来更换主题色和背景色。当用户点击相应的按钮时，changeSkin 方法会被调用，并更新CSS变量的值来实现换肤效果。这种方法不需要重新加载页面，因为CSS变量可以实时更新。