Input.vue

<template>
  <el-input :class="{ 'greenClass': isGreen && isDisplay, 'yellowClass': isYellow && isDisplay, 'redClass': isRed && isDisplay }"
    v-storeModify :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
    <template v-slot:suffix>
      <slot name="suffix"></slot>
    </template>
  </el-input>
</template>

<script>
export default {
  inject: ["root"],
  props: {
    value: {
      type: [String, Number],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      isRed: false,
      isGreen: false,
      isYellow: false
    }
  },
  directives: {
    storeModify: {
      update(el, bind, vnode) {
        let _this = vnode.context
        let key = vnode.parent.data.model.expression
        let keyArray = key.split('.')
        let curKey = keyArray.pop()
        let resultKey = keyArray.join(".")

        let deepData = _this.getProperty(resultKey, _this.root)
        if (deepData && Array.isArray(deepData.modifySet)) {
          if (deepData.modifySet.includes(curKey)) {
            _this.isRed = true
          }
        }
        if (deepData && Array.isArray(deepData.ebankSet)) {
          if (deepData.ebankSet.includes(curKey)) {
            _this.isYellow = true

          }
        }
        if (deepData && Array.isArray(deepData.incSet)) {
          if (deepData.incSet.includes(curKey)) {
            _this.isGreen = true
          }
        }
        el.onchange = (...args) => {
          if (deepData.modifySet) {
            if (Array.isArray(deepData.modifySet)) {
              if (deepData.modifySet.includes(curKey)) {
                return
              }
              deepData.modifySet.push(curKey)
            }
          } else {
            deepData.modifySet = [curKey]
          }
        }
      }
    }
  },
  computed: {
    model: {
      get() {
        return this.value
      },
      set(newVal) {
        this.$emit('input', newVal)
      }
    },
    mode() {
      return this.$store.state.Status.mode
    },
    isDisable: {
      get() {
        return this.mode === 'display' || this.disabled
      }
    },
    isDisplay: {
      get() {
        return this.mode === 'display'
      }
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1
    },
    highlightChanges() {
      return this.$store.state.Status.highlightChanges.indexOf(this.id) !== -1
    },
    attrs() {
      if (this.mode === 'display' || this.disabled) {
        let { placeholder, ...rest } = this.$attrs
        return rest
      }
      return this.$attrs
    }
  },
  methods: {
    isIncludeType(data) {
      if (data && Array.isArray(data.modifySet)) {
        if (data.modifySet.includes(curKey)) {
          _this.isRed = true
        }
      }
      if (data && Array.isArray(data.ebankSet)) {
        if (data.ebankSet.includes(curKey)) {
          _this.isYellow = true

        }
      }
      if (data && Array.isArray(data.incSet)) {
        if (data.incSet.includes(curKey)) {
          _this.isGreen = true
        }
      }
    },
    getProperty(str, value) {
      let keys = str?.split('.')
      for (let key of keys) {
        if (value) {
          value = value[key]
        }
      }
      return value
    }
  }
}
</script>

<style lang="less" scoped>
.greenClass /deep/ .el-input__inner {
  border-color: green;
  border-width: medium;
}

.greenClass /deep/ .el-textarea__inner {
  border-color: green;
  border-width: medium;
}

.yellowClass /deep/ .el-input__inner {
  border-color: blue;
  border-width: medium;
}

.yellowClass /deep/ .el-textarea__inner {
  border-color: blue;
  border-width: medium;
}

.redClass /deep/ .el-input__inner {
  border-color: red;
  border-width: medium;
}

.redClass /deep/ .el-textarea__inner {
  border-color: red;
  border-width: medium;
}

/*
.el-input.change-light .el-input__inner{
  border-color: #E6A23C;
}
.el-textarea.change-light .el-textarea__inner {
  border-color: #E6A23C;
} */</style>