Vue+less+cssVal实现在线换肤

前言

       上次写的换肤方案是比较适合于自己系统给定几套固定样式用于让用户切换。但是如果有需要让用户自定义颜色和图片的话,这套换肤方案会比较适合你。该文参考了该篇文章,并对其做了一些改进。做了持久化以及图片的切换。
应对需求

  1. 默认有几套主题色供用户选择
  2. 用户也可以自定义主题色
  3. 用户选定主题后需立即生效,无需重启项目或重新打包项目

一、准备工作

1.创建vue项目
2.安装插件(使用less)

npm install style-resources-loader -D 
npm install vue-cli-plugin-style-resources-loader -D
npm install less-loader@5.0.0 --save
npm install less --save

二、新建style.less

       style.less用于配置全局的默认样式,也可以是默认主题或字体颜色。在项目src目录下新建theme文件夹,然后新建style.less,代码如下

// 默认的主题颜色
@primaryColor: var(--primaryColor, #000);
@primaryTextColor: var(--primaryTextColor, green);
// 导出变量
:export {
  name: 'less';
  primaryColor: @primaryColor;
  primaryTextColor: @primaryTextColor;
}

三、配置vue.config.js(配制了就可以使用less变量了)

const path = require("path");
module.exports = {
  lintOnSave: false,
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, "./src/theme/style.less"),
      ],
    },
  },
};

       当我们配置好vue.config.js文件后,就可以在项目的任何地方使用我们预先定义的less变量了,示例代码如下:

<style lang="less" scoped>
p {
    color: @primaryTextColor;
}
</style>

四、配置几套可选主题

在/src/theme目录下新建model.js,编写自定义主题代码,代码如下:

// 一套默认主题以及一套暗黑主题
// 一套默认主题以及一套暗黑主题
export const themes = {
  default: {
    primaryColor: `${74}, ${144},${226}`,
    primaryTextColor: `${74}, ${144},${226}`,
    imgUrl:'logo-light.png'
  },
  dark: {
    primaryColor: `${0},${0},${0}`,
    primaryTextColor: `${0},${0},${0}`,
    imgUrl:'logo-dark.png'
  },
}

       这里我们定义了两套默认主题,目的就是为了让用户能够在这两套主题中切换,其中主题颜色我们采用了rgba的写法,因为有可能我们需要在不用的地方使用同一主题色,但是透明度不一样

五、编写修改主题的方法

       全局的颜色变量以及两套默认主题我们都编写好了,在这里我们已经实现了静态更改主题,即可以更改颜色,项目重新运行后便可生效。但是这还达不到我们的目的,我们需要动态更改主题,所以我们还需要编写一个能够动态更改主题的方法。
在/src/theme文件夹下新建theme.js文件,代码如下:

import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {
  for (let key in obj) {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 改变主题的方法
export const setTheme = (themeName) => {
  localStorage.setItem("theme", themeName); // 保存主题到本地,下次进入使用该主题
  const themeConfig = themes[themeName];
  // 如果有主题名称,那么则采用我们定义的主题
  if (themeConfig) {
    // localStorage.setItem("primaryColor", themeConfig.primaryColor); // 保存主题色到本地
    // localStorage.setItem("primaryTextColor", themeConfig.primaryTextColor); // 保存文字颜色到本地
    changeStyle(themeConfig); // 改变样式
  } else {
    // 如果是没有主题名称,则去取本地中的颜色值拿出来用
    let themeConfig = {
      primaryColor: localStorage.getItem("primaryColor"),
      primaryTextColor: localStorage.getItem("primaryTextColor"),
    };
    changeStyle(themeConfig);
  }
};

六、配置vuex存储主题名

store/index下面配置即可

import Vue from "vue";
import Vuex from "vuex";
// import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    themeName: localStorage.getItem('themeName')
  },
  mutations: {
    setTheme (state, data) {
      state.themeName = data
    }
  },
  actions: {},
  modules: {},
  // plugins: [
  //   createPersistedState({
  //     storage: window.localStorage,
  //     reducer (val) {
  //       // console.log(val);
  //       return val
  //     }
  //   })]
});

七、动态变换主题

       修改我们的HelloWorld组件,演示如何动态修改主题。
       测试代码如下:

<template>
  <div class="hello">
    <img :src="avatar" alt="" />
    <div class="box-1"></div>
    <div class="box-2"></div>
    <p>我是测试文字</p>
    <button @click="defaultTheme">默认主题</button>
    <button @click="dark">暗黑主题</button>
    <button @click="custom">自定义主题</button>
  </div>
</template>


<script>
import { setTheme } from "../theme/theme";
import { mapState, mapMutations } from "vuex";
export default {
  name: "HelloWorld",
  computed: {
    ...mapState({
      themeName: 'themeName'
    }),
    avatar () {
      if (!this.themeName || this.themeName === 'zidingyi') {
        // 这里应该去取自定义图片在服务器的路径,然后弄回来,这里先用本地的代替了
        return require(`@/assets/images/logo-default.png`)
      } else {
        return require(`@/assets/images/logo-${this.themeName}.png`)
      }

    },
  },
  mounted () {
    this.init(); // 初始化主题
  },
  methods: {
    ...mapMutations({
      setTheme: 'setTheme'
    }),
    init () {
      // setTheme("default"); // 初始化未默认主题
    },
    // 更改为默认主题
    defaultTheme () {
      localStorage.setItem('themeName', 'default')
      this.setTheme('default')
      setTheme("default");
    },
    // 更改为暗黑主题
    dark () {
      localStorage.setItem('themeName', 'dark')
      this.setTheme('dark')
      setTheme("dark");
    },
    // 更改为自定义主题
    custom () {
      let newColor = {
        r: 12,
        g: 33,
        b: 234,
      };
      localStorage.setItem('themeName', 'zidingyi')
      this.setTheme('zidingyi')
      let newPrimaryColor = `${newColor.r},${newColor.g},${newColor.b}`;
      localStorage.setItem("primaryColor", newPrimaryColor); // 将新的主题色存入本地
      localStorage.setItem("primaryTextColor", newPrimaryColor); // 将新的主题色存入本地
      setTheme();
    },
  },
};
</script>
<style scoped lang="less">
.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  .box-1 {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    background: rgba(@primaryColor, 1);
  }
  .box-2 {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    background: rgba(@primaryColor, 0.3);
  }
  p {
    color: rgb(@primaryTextColor);
  }
}
       当我们进入页面是,会采用默认主题样式,然后用户可以点击按钮更改自定义的样式,并且会保存到本地和vuex中。 最终效果:

在这里插入图片描述

图片切换实现思路:
       图片的路径主要使用computed来获取,这样子我们在更改主题的时候,vuex保存的主题值就会发生变化,而computed会监视该变化从而达到更换图片路径的效果

demo地址https://github.com/rui-rui-an/changeskin_by_less

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue和Spring Boot是目前非常流行的前后端开发框架,可以用于开发各种Web应用。而PageOffice则是一款专业的Office文档在线编辑工具,支持多种格式的文档编辑,包括Word、Excel、PPT等。 要实现Vue和Spring Boot集成PageOffice并实现在线编辑Word功能,可以按照以下步骤进行: 1. 创建Vue项目并引入PageOffice插件:首先使用Vue CLI创建一个新的Vue项目,然后在项目中引入PageOffice插件,可以通过npm安装或直接在HTML中引入PageOffice的脚本文件。 2. 集成Spring Boot:创建一个Spring Boot项目,使用Maven或Gradle配置相关依赖,并设置好后端的路由和接口。 3. 后端接口:在Spring Boot项目中编写后端接口,用于接收前端传递的Word文档数据以及编辑保存的功能。可以使用Spring MVC来处理路由和参数解析,然后将文档数据传递给PageOffice进行编辑。 4. 前端页面:在Vue项目中创建一个用于展示和编辑Word文档的前端页面。通过Vue的组件方式,引入PageOffice并使用其提供的API,在页面上展示Word文档并提供编辑功能。 5. 数据传输和保存:在前后端通过HTTP接口进行数据的传输,前端将编辑保存的文档数据发送到后端,后端将数据保存到数据库或文件系统中。 6. 页面展示:将编辑保存的文档从数据库或文件系统中取出,并在前端页面上进行展示,用户可以随时加载、编辑和保存文档。 综上所述,使用Vue和Spring Boot集成PageOffice进行在线编辑Word,需要前后端的配合,前端负责页面展示和编辑功能,后端负责接口的处理和数据的保存。这样就能够实现一个功能完善的在线编辑Word的应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值