Dynamically load css scripts to modify styles

scenes to be used:

Scenario: This project uses the company's product low-open platform to create a form page, which supports modifying the form style through configuration, including whether to display the border line, setting the border line color and width, modifying the label background color, etc.

Implementation

To achieve the above functions, some elementUI components are used, such as el-form form. If you want to modify the style of a component, you can only modify it in the native <style> tag.

<style>
.controlFormBorder .el-form-item .el-form-item__label {
  background: #F2F9FC;
  border-right: #E4EEF6 1px solid;
  padding-left: 12px;
  height: 100%;
  line-height: 45px;
}
</style>

To dynamically modify the style of a component, you can dynamically load a css script.

Implementation steps

Create the formStyle.js file. The content of the file is the component style that needs to be modified.

export default `
.controlFormBorder {
  padding-top: 0 !important;
  padding-bottom: 0 !important;;
}
.controlFormBorder .el-form-item {
  margin: 0 !important;
  border-right: #E4EEF6 1px solid;
  height: 100%;
}
.controlFormBorder .el-form-item .el-form-item__label {
  background: #F2F9FC;
  border-right: #E4EEF6 1px solid;
  padding-left: 12px;
  height: 100%;
  line-height: 45px;
}
.controlFormBorder .el-form-item .el-form-item__content {
  position: relative;
  // line-height: 45px;
  line-height: 25px;
  margin-top: 10px;
}
`

Create the globalForm.js file in the src/store/modules folder. The globalForm.js file contains the configuration information of the form.

import _ from 'lodash'
import styleJSON from '@/styles/formStyle'
// 记录表单状态 false 未变 true 变动

const formDesignData = {
  namespaced: true,
  state: {
    formModels: {}, //表单资源信息维护数据
    permission: null // 权限
  },
  getters: {
    get_permission: state => state.permission,
    get_formModels: state => state.formModels,
  },
  mutations: {
    SET_FORM_MODELS(state, data) {
      state.formModels = data
    },
    SET_PERMISSION(state, data) {
      state.permission = data
    },
  },
  actions: {
    setFormBorderStyle ({
      commit
    }, formModels) {
      let styleTag = document.getElementById('formBorderStyle')
      if (!styleTag) {
        // 动态创建style标签，插入到页面中
        styleTag = document.createElement('style')
        styleTag.setAttribute('id', 'formBorderStyle')
        document.head.appendChild(styleTag)
      }
      // 以 ; 为分隔符，分割样式，根据不同的关键字，进行内容替换，实现动态修改样式功能
      let styleJSONArr = styleJSON.split(';').map(item => {
        if (item.includes('background')) {
          try {
            return item.replace('#F2F9FC', _.get(formModels,'content.config.borderAttr.background','#F2F9FC'))
          } catch (e) {
          }
        } else {
          if (item.includes('#E4EEF6')) {
            try {
              return item.replace('#E4EEF6', _.get(formModels,'content.config.borderAttr.color','#E4EEF6'))
            } catch (e) {
            }
          } else {
            return item
          }
        }
      })
      styleTag.innerHTML = styleJSONArr.join(';')
    },
  },
}

export default formDesignData

On pages that need to dynamically modify the style, execute the setFormBorderStyle method x

<script>
import {mapActions} from "vuex";
export default{
  data(){
    return{
    
    }
  },
  mounted(){
    // 页面初始化时，调用setFormBorderStyle方法，修改表单样式
    this.setFormBorderStyle()
  },
  methods: {
    ...mapActions('formDesignData', ['setFormBorderStyle']),
  }
}
</script>

Effect