Varx 介绍

通过 js 开发的一个 css var pollyfill ，让开发者可以在低浏览器（ie）项目中使用 css var 来编写样式，更有利于换肤功能的开发。

相关链接

• 预览地址：兼容 IE 的换肤预览
• 实现原理：兼容 IE 的换肤利器——Varx
• 源码仓库：themex: 换肤功能的解决方案。

安装方式

项目安装

npm i -S @iel/varx
// or
yarn add @iel/varx

项目使用（Vue）

Vue2

import Vue from 'vue'
import { createVarx } from '@iel/varx'
import GenerateRootStyle from '@iel/varx/lib/plugins/generate-root-style'
import LowBrowser from '@iel/varx/lib/plugins/low-browser'
import InVue from '@iel/varx/lib/plugins/in-vue'

const varx = createVarx({
  plugins: [
    // 生成 :root 样式
    GenerateRootStyle(),
    // 只在不支持 `css var` 的浏览器中开启兼容功能
    LowBrowser({ onlyLowBrowser: process.env.NODE_ENV === 'production' })
  ]
})

// 挂载在全局上便于使用
// InVue 插件为 vue 项目做适配集成
Vue.prototype.$varx = InVue(varx)

Vue3

vue3 中推荐使用 hooks 方式进行使用。

import { createVarx } from '@iel/varx'
import GenerateRootStyle from '@iel/varx/lib/plugins/generate-root-style'
import LowBrowser from '@iel/varx/lib/plugins/low-browser'
import InVue from '@iel/varx/lib/plugins/in-vue'

const varx = createVarx({
  plugins: [
    // 生成 :root 样式
    GenerateRootStyle(),
    // 只在不支持 `css var` 的浏览器中开启兼容功能
    LowBrowser({ onlyLowBrowser: process.env.NODE_ENV === 'production' })
  ]
})

export default function useVarx() {
  return InVue(varx)
}

使用方式

Vue2

<template>
  <div id="app">
    更换主题色：
    <!-- 获取颜色值推荐使用 grv 函数，用于获取响应式变量值，由插件 InVue 提供 -->
    <input :value="$varx.grv('primaryColor')" type="color" @input="onColorChange" />
    <textarea :style="`background: ${$varx.grv('primaryColor')};`" />
    <button :style="buttonStyle">Submit</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    buttonStyle() {
      return {
        color: this.$varx.grv('primaryColor')
      }
    }
  },
  methods: {
    onColorChange(e) {
      // 注册 `css var` ，修改同样使用该函数
      // 推荐全局注册颜色关系，修改时仅修改变量值即可 this.$varx.encodeVarObj({ primaryColor: e.target.value })
      this.$varx.encodeVarObj({
        primaryColor: {
          value: e.target.value,
          onUpdate: (value, key, varx, eventType) => {
            // eventType: update, remove
            // 变更类型为 `remove` 时同步删除 `color`
            if (eventType === 'remove') {
              // 删除时不再触发变更事件
              return varx.deleteVar('color', false)
            }
            // 当 `primaryColor` 变更时变更 `color`，并且不再触发变更事件
            this.$varx.encodeVarTuple('color', value, false)
          }
        }
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  // css 内部直接使用
  color: var(--primaryColor);
}
</style>

Vue3

<template>
  更换主题色：
  <!-- 获取颜色值推荐使用 grv 函数，用于获取响应式变量值，由插件 InVue 提供 -->
  <input :value="varx.grv('primaryColor')" type="color" @input="onColorChange" />
  <textarea :style="`background: ${varx.grv('primaryColor')};`" />
  <button :style="buttonStyle">Submit</button>
</template>

<script setup>
import useVarx from '@/hooks/use-varx'
import { computed } from 'vue'

const buttonStyle = computed(() => ({ color: varx.grv('primaryColor') }))

function onColorChange(e) {
  // 注册 `css var`
  // 推荐全局注册颜色关系，修改时仅修改变量值即可 varx.encodeVarObj({ primaryColor: e.target.value })
  varx.encodeVarObj({
    primaryColor: {
      value: e.target.value,
      onUpdate: (value, key, varx, eventType) => {
        // eventType: update, remove
        // 变更类型为 `remove` 时同步删除 `color`
        if (eventType === 'remove') {
          // 删除时不再触发变更事件
          return varx.deleteVar('color', false)
        }
        // 当 `primaryColor` 变更时变更 `color`，并且不再触发变更事件
        varx.encodeVarTuple('color', value, false)
      }
    }
  })
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  // css 内部直接使用
  color: var(--primaryColor);
}
</style>