Varx 介绍

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

安装方式

项目安装

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' })
  ]
})

// 挂载在全局上便于使用
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">
    更换主题色：
    <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: {
          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>
  更换主题色：
  <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: {
      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>