阅读 2074

非常规 - VUE 实现特定场景的主题切换

本文作者:刘文涛

原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。

实现页面皮肤切换,常见的方案有几种:替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等; 不同的业务场景,我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现 ,我们尝试了一种新的解决方案,实现了页面主题的切换,目标是为了提高项目的可维护性、可扩展性,以及降低接入复杂度。

“主题”需求

在了解主题功能之前,我们先来解下业务场景:在运营活动后台中,编辑活动配置页面,拖拽选择所需对应组件,并设置组件相应配置项,点击保存,既完成活动页面发布活动,前台就能访问对应生成活动。 编辑页面如下图:

在如上前提,我们的需求就是:在运营后台配置页面中,实现全局切换主题功能,具体需求如下:

  1. 在配置页面,初始化页面时,实现主题一键切换所有组件的样式;
  2. 页面中的组件的配置,可配置对应组件样式,覆盖主题样式;
  3. 再次点击设置主题,可以覆盖已经设置样式的组件样式;

实现效果如下图所示:

那在了解完需求之后,对于 VUE 项目,要实现主题功能,一般想到的实现方式就是 theme 参数通过 prop 下发来实现。 那我们就先来聊下常规实现方式:prop 下发实现方式。

常规实现方式

定义主题

首先我定义 theme.js 为主题相关参数,如下:

const DEFAULT_THEME = {
  primary: '#2F54EB',
  subPrimary: '#D6E4FF',
  error: '#F5222D',
  success: '#52C41A',
  warning: '#FAAD14',
  background: '#FFFFFF',
  text: '#222222'
}
export default {
    DEFAULT: DEFAULT_THEME,
    FIRST: {
        ...DEFAULT_THEME,
        background: '#2590ff'
    }
}
复制代码

主模块下发 theme 给予组件

接着需要在主模块中,下发 theme 参数,和组件相关配置参数 给到组件,点击按钮,切换主题:

<template>
  <div>
    <div @click="changeTheme">换主题</div>
    <Component 
        v-for="(item, index) in componentList"
        :theme="theme" 
        :key="index"
        ...item.config  // 业务相关参数都在config中
    />
  </div>
</template>
<script>
import theme from 'theme.js'
export default {
    name: "themeChange",
    data() {
        return {
            theme: theme['DEFAULT']
        }
    },
    methods: {
        changeTheme() {
            this.theme = theme['FIRST']
        }
    }
}
</script>
复制代码

组件监听 theme 改变组件样式

组件中,获取上级组件传递下来的配置参数及主题参数,并监听 theme 的变化,当发生改变,重置样式参数值为主题样式:

<template>
  <div>
    <div :style="{ background: config.bgColor }">主题</div>
  </div>
</template>

<script>
import theme from 'theme.js'
const initTheme = theme['DEFAULT']
export default {
    name: "themeSwitch",
    props: {
        theme: {
            type: Object,
            default: () => ({})
        },
        bgColor: {
            type: String,
            default: initTheme.background
        },
        ...
    },
    data() {
        return {
            config: {
                bgColor: this.bgColor,
                ...
            }
        }
    },
    watch: {
        'theme' (to, from) {
            this.config.bgColor = this.theme.bgColor
        }
    }
}   
</script>
复制代码

看到这里大家会说,为什么需要在 watch 中监听主题的变化,而不是在组件初始化的时候参数就直接指向主题对应的参数呢?

因为主题需求里面所说的,在组件里面也是可以改变组件相关样式的,上述 demo 代码中的 bgColor 参数,既可以通过点击切换主题可以设置 ,也可以是组件自己设置的,有多个来源(这里不对组件的配置实现做详细展开);要做到设置主题的时候,组件的样式会设置相应的主题色,就需要在 watch 中进行监听 theme 参数的变化,发生变化,重置相应参数,但是这种方式在每个组件都需要有相同代码片段,监听参数,达到我们的效果,代码非常冗余。

综上,我们对代码进一步优化,把监听 theme 参数的方法统一封装,这里会有另一个问题:每个组件对应颜色的参数是不可定的,且参数层级也是不可定的,几乎每个组件需要维护一整个变量数组。这样定义的规则会相对复杂,维护成本过高,且极易弄错。

很显然这样的实现方式并不是一种很好的方法,那要如何实现?

“非常规”实现方式

在尝试上面的方式之后,我在想我的思路是否正确,是不是切入角度有点问题,那我们换一个角度去切入。

配置参数入手

当我发现页面整个 this.componentList 参数 ( 里面存储了所有组件的相关配置 ) 我是可以拿到的时候,我是不是可以从数据入手? ok,说到这里,那其实思路就出现了, this.componentList 里面的参数规则:

[
    {
        componentName: 'xx',
        config: {
            color: 'xxx',
            background: 'xxx',
            ...
        }
    },
    ...
]
复制代码

我们会发现,在开发组件的时候就已经是把颜色相关参数提取到配置里面了,那也就是说我修改配置参数的值,其实就可以达到设置主题的效果? 因为所有组件的配置参数都是由this.componentList 参数下发的。

参数给予特殊标识

定义 theme.js 相关参数,和上面一致,故不在多说,主要做的就是,在组件中,我们把相关参数进行修改,改为有特殊标示的参数, 如下:

<template>
  <div>
    <div :style="{ background: this['bgColor.t.background']}">主题</div>
  </div>
</template>

<script>
import theme from 'theme.js'
const initTheme = theme['DEFAULT']

export default {
    name: "themeSwitch",
    props: {
        'bgColor.t.background': {  // .t.: 为特殊标识 ;background: 为主题里面对应的字段名 background: '#FFFFFF'
            type: String,
            default: initTheme.background
        }
    }
}   
</script>
复制代码

遍历参数替换特殊标识参数值

当点击主题切换的时候,会去遍历 this.componentList 参数,修改有特殊标示的参数为新主题对应的参数,代码如下:

/*
* 根据主题重制componentsConfig
* @method changeTheme
* */
changeTheme () {
    this.theme = theme['FIRST']
    this.componentList.forEach(component => {
        this._setThemeChangeConfig(component.config || {})
    })
},
_setThemeChangeConfig (obj) {
    Object.keys(obj).map(name => {
        if (Object.prototype.toString.call(obj[name]) === '[object Object]') {
            this._setThemeChangeConfig(obj[name])
        } else {
            const themeColorArr = name.match(/\.t\.(\S*)/)
            if (themeColorArr && this.isThemeColorName(themeColorArr[1])) {
                this.$set(obj, name, this.theme[themeColorArr[1]])
            }
        }
    })
},
/*
* 判断颜色name是否在主题里面
* @method isThemeColorName
* */
isThemeColorName (name) {
    let has = false
    Object.keys(this.theme).forEach((paramsName) => {
        if (paramsName === name) has = true
    })
    return has
}
复制代码

最终实现了最终的主题切换的效果。

该方式带来的优势:

  1. 对组件代码几乎无侵入性,组件只需要修改样式相关参数带上特殊标示既可,规则相对简单;
  2. 参数无需一层层下发,易于维护;
  3. 主题与主线功能相对独立,可以轻易移除主题功能,项目也可以正常运行;

总结

主题的实现,不管是常见的方式,还是上述项目中的主题的实现方式,我们往往需要了解业务特性,去寻找最合适的解决方案。不同项目,有不同的实现方式,但目标都是为了提高项目的可维护性、可扩展性,以及降低接入复杂度。

项目目前的实现方案,尚不失为一个好的解决方案,或者可以作为一种新的思路,供大家参考。

更多分享,请关注 YFE:

想要了解关于团队的更多信息,可以查看官网哦 😄

关注下面的标签,发现更多相似文章
评论