// 移除ref的class
// ref_info 都是获取$refs对象,例如:this.$refs.class1
// 这里的 ref_info 是个数组[this.$refs.class1, this.$refs.class2]
// 是否为组件的情况需要区分的,决定是否需要使用`$el`来获取
refRemoveClass(ref_info, class_name) {
ref_info.forEach((element) => {
// 区分是否为组件内,使用需要用 $el
let class_name_arr = element.$el
? element.$el.className.split(" ")
: element.className.split(" ");
let index = class_name_arr.findIndex((item) => {
return item == class_name;
});
if (index !== -1) class_name_arr.splice(index, 1);
// 区分是否为组件内,使用需要用 $el
if (element.$el) {
element.$el.className = class_name_arr.join(" ");
} else {
element.className = class_name_arr.join(" ");
}
});
},
// 添加ref的class
// 添加ref的class
refAddClass(ref_info, class_name) {
if (this.hasClass(ref_info, class_name)) return;
// 区分是否为组件内,使用需要用 $el
let class_name_arr = [];
if (ref_info.$el) {
if (ref_info.$el.className === undefined) {
// 判断是否为空
class_name_arr = ref_info.$el.className.split(" ");
} else {
class_name_arr = ref_info.$el[0].className.split(" ");
}
} else {
if (ref_info.className !== undefined) {
// 判断是否为空
class_name_arr = ref_info.className.split(" ");
} else {
class_name_arr = ref_info[0].className.split(" ");
}
}
class_name_arr.push(class_name);
// 区分是否为组件内,使用需要用 $el
if (ref_info.$el) {
if (ref_info.$el.className === undefined) {
ref_info.$el.className = class_name_arr.join(" ");
} else {
ref_info.$el[0].className = class_name_arr.join(" ");
}
} else {
if (ref_info.className !== undefined) {
// 判断是否为空
ref_info.className = class_name_arr.join(" ");
} else {
ref_info[0].className = class_name_arr.join(" ");
}
}
},
// 判断ref是否有该class
hasClass(ref_info, class_name) {
let reg = new RegExp("(^|\\s)" + class_name + "($|\\s)");
// 区分是否为组件内,使用需要用 $el
if (ref_info.$el) {
return reg.test(ref_info.$el.className);
} else {
return reg.test(ref_info.className);
}
},
vue ref 添加删除判断class 样式
于 2021-11-25 18:07:47 首次发布