You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.4 KiB
81 lines
2.4 KiB
export default {
|
|
bind(el) {
|
|
|
|
// 获取所有子元素中的 input 和 el-select
|
|
const inputs = el.querySelectorAll('input');
|
|
const selects = el.querySelectorAll('.el-select');
|
|
const textareas = el.querySelectorAll('textarea');
|
|
|
|
// function applyHighlight(inputEl) {
|
|
// const isModified = inputEl.value !== null && inputEl.value.trim() !== '';
|
|
// if (isModified) {
|
|
// inputEl.classList.add('highlight');
|
|
// } else {
|
|
// inputEl.classList.remove('highlight');
|
|
// }
|
|
// }
|
|
//
|
|
// inputs.forEach(inputEl => {
|
|
// // 初始检查
|
|
// applyHighlight(inputEl);
|
|
//
|
|
// // 监听输入变化
|
|
// inputEl.addEventListener('input', function() {
|
|
// applyHighlight(inputEl);
|
|
// });
|
|
// });
|
|
|
|
// 处理所有的 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');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
};
|