动态加载css脚本修改样式

使用场景：

场景：本项目使用公司产品低开平台创建表单页面，支持通过配置修改表单样式，包括是否显示边框线，设置边框线颜色、宽度，修改label背景色等功能。

---

实现方法

实现上述功能，使用了一些elementUI组件，例如el-form表单。要想修改组件的样式，只能在原生的<style>标签修改。

<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>

要动态修改组件的样式，可以通过动态加载css脚本实现。

---

实现步骤

• 创建formStyle.js文件，文件内容为需要修改的组件样式。

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;
}
`

• 在src/store/modules文件夹下创建globalForm.js文件，globalForm.js文件包含表单的配置信息

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

• 在需要动态修改样式的页面，执行setFormBorderStyle方法x

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

• 效果