rmLayGaoujU9O46l603ccl_plm-vue/src/utils/highlight.js

export default {
  bind(el) {

    // 获取所有子元素中的 input 和 el-select
    const inputs = el.querySelectorAll('input');
    const selects = el.querySelectorAll('.el-select');
    const textareas = el.querySelectorAll('textarea');


    // 处理所有的 input 元素
    inputs.forEach(inputEl => {
      inputEl.dataset.originalValue = inputEl.value;

      inputEl.addEventListener('input', function() {
        const isModified = inputEl.value !== inputEl.dataset.originalValue;
        if (isModified) {
          inputEl.classList.add('highlight');
        } else {
          inputEl.classList.remove('highlight');
        }
      });
    });

    // 处理所有的 textarea 元素
    textareas.forEach(textareaEl => {
      textareaEl.dataset.originalValue = textareaEl.value;

      // 监听 input 事件
      textareaEl.addEventListener('input', function() {
        const isModified = textareaEl.value !== textareaEl.dataset.originalValue;
        if (isModified) {
          textareaEl.classList.add('highlight');
        } else {
          textareaEl.classList.remove('highlight');
        }
      });

    });

    // 处理所有的 el-select 元素
    selects.forEach(selectEl => {
      const selectComponent = selectEl.__vue__;
      if (!selectComponent) {
        console.warn('Element does not have a Vue instance attached.');
        return;
      }

      selectEl.dataset.originalValue = selectComponent.value;

      selectComponent.$on('change', function(value) {
        const selectInputEl = selectEl.querySelector('.el-input__inner');
        if (selectInputEl) {
          const isModified = value !== selectEl.dataset.originalValue;
          if (isModified) {
            selectInputEl.classList.add('highlight');
          } else {
            selectInputEl.classList.remove('highlight');
          }
        }
      });
    });
  }
};