美文网首页
Vue前端换肤

Vue前端换肤

作者: 取个帅气的名字真好 | 来源:发表于2019-06-04 22:04 被阅读0次
换肤效果

本文采取 CSS自定义变量 实现

  • 使用 document.body.style.setProperty('--bg', 'red');设置变量

  • 使用 document.body.style.getPropertyValue('--bg');获取变量

  • 使用 document.body.style.removeProperty('--bg');删除变量

  • var()来访问。第二个值表示变量的默认值。如:var(--bg,'#fff')

  • :root {}声明

:root {
  --bg: red;
}

#test{
  background:var(--bg);
}
:root{} var()

注意:

  • 背景图片不支持这种写法 --bg:url('@/assets/bg1.jpg'); 需要换背景图片可在js中用 字符串模板 + require 设置。
    如:document.body.style.setProperty('--bg',`url(${require('@/assets/bg1.jpg')})`);

读取小坑。document.body.style.getPropertyValue('--bg'); 读取出来为空。
可换成如下代码:
const rootStyles = getComputedStyle(document.documentElement);
const varValue = rootStyles.getPropertyValue('--bg').trim(); //读取--bg值

完!!!


上代码吧!!

// test.vue

<template>
  <div id="test">
    <button @click="skin(1)">皮肤1</button>
    <button @click="skin(2)">皮肤2</button>
    <button @click="skin(3)">皮肤3</button>
    <p>使用 document.body.style.setProperty('--bg', 'red'); 来设置变量</p>
    <p>使用 document.body.style.getPropertyValue('--bg'); 来获取变量</p>
    <p>使用 document.body.style.removeProperty('--bg'); 来删除变量</p>
    <svg-icon icon-class="users" class-name="users"></svg-icon>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      skin(e) {
        if (e === 1) {
          document.body.style.setProperty('--bg', '#7F583F');
          document.body.style.setProperty('--color', '#123');
          document.body.style.setProperty('--fontSize', '12px');
          document.body.style.setProperty('--fill', 'red');
        }
        if (e === 2) {
          document.body.style.setProperty('--bg', '#687');
          document.body.style.setProperty('--color', '#542');
          document.body.style.setProperty('--fontSize', '14px');
          document.body.style.setProperty('--fill', '#fff');
        }
        if (e === 3) {
          document.body.style.setProperty('--bg', `url(${require('@/assets/bg1.jpg')})`);
          document.body.style.setProperty('--color', 'red');
          document.body.style.setProperty('--fontSize', '16px');
          document.body.style.setProperty('--fill', '#000');
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import url('./index.scss');
</style>

// index.scss

:root{
  --bg:red;
  --color:#000;
  --fontSize:16px;
  --fill:red;
}
$color:var(--color);
#test {
  background:var(--bg);
  height:500px;
  width: 400px;
  font-size: var(--fontSize);
  color: $color;
  .users{
    fill: var(--fill);
    font-size: 100px;
  }
}

相关文章

  • Vue前端换肤

    本文采取 CSS自定义变量 实现 使用 document.body.style.setProperty('--bg...

  • 前端-Vue实现换肤功能

    业务需求:根据不同的"标识" 加载应用时 自动更换主题 需要的东西:vue-cli 全家桶 主要(vuex,vue...

  • 前端-Vue实现换肤功能

    业务需求:根据不同的"标识" 加载应用时 自动更换主题 需要的东西:vue-cli 全家桶 主要(vuex,vue...

  • 前端换肤

    我的主要方式写两套css,点击替换css 1、纯css方式,写两套 2、用预处理器(也是相当于写多套css) 我用...

  • Vue 换肤

    可替换的内容 一些图标(需使用background而非img) 一些颜色(包括文字/背景/边框颜色) 配置方式 在...

  • 一文总结前端换肤换主题

    最近项目涉及换主题/换肤的工作, 查了查资料,总结出五种换肤方案: 这是五种均为通用方案,可以适用于各种前端框架,...

  • How to use symfony's compone

    采用框架:codeIgniter前端:Vue js 因使用 Vue js 与 element ui 实现前端,使用...

  • vue入门——大前端

    大前端进阶 前端三剑客:HTML+CSS+JS 前端框架:jQuery、BootStrap、Vue vue的思想是...

  • Vue 快速入门

    Vue 即 Vue.js,它是流行的前端开发框架,目前已经发展成为优秀的前端生态。 学习 Vue 之前,需要具备:...

  • 前端学习大概内容

    现代的前端开发模式 前端三驾马车:Angular、React、Vue Vue.js 学习vue.js前,需要了解的...

网友评论

      本文标题:Vue前端换肤

      本文链接:https://www.haomeiwen.com/subject/hqorxctx.html