zoukankan      html  css  js  c++  java
  • vue + css3 实现主题色切换

    开发商城总免不了主题色的更换, 总不能一个个颜色手动粘贴复制吧,一键切换不香嘛

    首先需要用到css3的var()函数,用法如下

    1 body {
    2     --size: 20px;
    3     font-size: var(--size);    // 20px
    4     padding:var(--size);       // 20px
    5 }

    思路:

    • 就是在vue的最外层盒子app中添加主题色的色值, 需要用到主题色的地方皆用变量取值

    上代码:

    app.vue中

     1 <template>
     2   <div id="app" :style="appStyle">
     3     <router-view class="app" ></router-view>
     4   </div>
     5 </template>
     6 
     7 <script>
     8 export default {
     9   name: "app",
    10 
    11   computed: {
    12     appStyle(){
    13       const themeColor = 1 
    14 
    15       // console.log('[App路由启动函数]', props, context, router)
    16       const themeColors = [
    17         '',
    18         '#DA251D',
    19         '#f56fa6',
    20         '#ff605c',
    21         '#86b902',
    22         '#40baff',
    23       ]
    24       return `--theme: ${themeColors[themeColor]}`
    25     }
    26   },
    27 
    28 };
    29 </script>
    30 
    31 <style lang="scss" rel="stylesheet/scss">
    32 @import "assets/style/index.scss";
    33 
    34 #app {
    35   height: 100%;
    36    100%;
    37   .app {
    38     background: #f5f5f5;
    39     padding-top: 45px;
    40   }
    41 }
    42 </style>

    通过更改 themeColor 的数值作为 themeColors 数组的索引值来进行更换色值

    需要用到的地方, 用以下写法即可

    1 background-color: var(--theme);
    2 color: var(--theme);

    效果图

  • 相关阅读:
    【leetcode】9. Palindrome Number
    【leetcode】7. Reverse Integer
    【Leetcode】6. ZigZag Conversion
    Mysql读写分离
    Windows下为PHP安装redis扩展
    jquery 写的图片左右连续滚动
    PHP中spl_autoload_register函数的用法
    MySQL命令行查询乱码解决方法:
    AJAX 教程
    Mac安装composer爬过的坑
  • 原文地址:https://www.cnblogs.com/huangaiya/p/14237432.html
Copyright © 2011-2022 走看看