Varx introduction

Pollyfill, a CSS VAR developed by JS, allows developers to use CSS VAR to write styles in low browser (IE) projects, which is more conducive to the development of skin function.

A link to the

  • Preview address: compatible with IE skin preview
  • Implementation principle: compatible IE skin changer – Varx
  • Themex: a skin function solution.

installation

Project installation

npm i -S @iel/varx
// or
yarn add @iel/varx
Copy the code

Project Usage (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: [
    // Generate :root style
    GenerateRootStyle(),
    // Enable compatibility only in browsers that do not support CSS var
    LowBrowser({ onlyLowBrowser: process.env.NODE_ENV === 'production'})]})// Mounts are globally easy to use
// The InVue plugin ADAPTS to the vUE project
Vue.prototype.$varx = InVue(varx)
Copy the code

Vue3

In VUe3, it is recommended to use 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: [
    // Generate :root style
    GenerateRootStyle(),
    // Enable compatibility only in browsers that do not support CSS var
    LowBrowser({ onlyLowBrowser: process.env.NODE_ENV === 'production'})]})export default function useVarx() {
  return InVue(varx)
}
Copy the code

use

Vue2

<template>
  <div id="app">Change the theme color:<! The GRV function is recommended to get the value of a responsive variable, provided by 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) {
      // Register 'CSS var', also use this function to modify
      This.$varx.encodevarobj ({primaryColor: e.target.value})
      this.$varx.encodeVarObj({
        primaryColor: {
          value: e.target.value,
          onUpdate: (value, key, varx, eventType) = > {
            // eventType: update, remove
            // Delete 'color' when the change type is' remove '
            if (eventType === 'remove') {
              // Change events are no longer triggered when deleting
              return varx.deleteVar('color'.false)}// Change 'color' when 'primaryColor' changes, and no longer trigger the change event
            this.$varx.encodeVarTuple('color', value, false)}}})}}</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center; // CSS for internal usecolor: var(--primaryColor);
}
</style>
Copy the code

Vue3

<template> Change the theme color: <! The GRV function is recommended to get the value of a responsive variable, provided by 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) {
  // Register 'CSS var'
  Varx.encodevarobj ({primaryColor: e.target.value})
  varx.encodeVarObj({
    primaryColor: {
      value: e.target.value,
      onUpdate: (value, key, varx, eventType) = > {
        // eventType: update, remove
        // Delete 'color' when the change type is' remove '
        if (eventType === 'remove') {
          // Change events are no longer triggered when deleting
          return varx.deleteVar('color'.false)}// Change 'color' when 'primaryColor' changes, and no longer trigger the change event
        varx.encodeVarTuple('color', value, false)}}})}</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center; // CSS for internal usecolor: var(--primaryColor);
}
</style>
Copy the code