newPromise
commented
6 years ago Open newPromise opened 6 years ago
newPromise
commented
6 years ago newPromise
commented
6 years ago 之前尝试过做过一个用于目录搜索的东西， 写了一段非常有意思的代码：
// val 用于搜索的文字字段
// menus 用来进行搜索的目录
filterMenus(val, menus) {
const filterVal = val;
const filterMenus = Util.clone(menus);
const filterFn = theMenus => {
if (theMenus.children) {
let spliceIndex = 0;
while (spliceIndex < theMenus.children.length) {
if (Array.isArray(theMenus.children[spliceIndex].children) && theMenus.children[spliceIndex].children.length !== 0) {
filterFn(theMenus.children[spliceIndex]);
if (theMenus.children[spliceIndex].children.length !== 0) {
spliceIndex++;
continue;
}
}
if (theMenus.children[spliceIndex] && theMenus.children[spliceIndex].title && theMenus.children[spliceIndex].title.indexOf(val) > -1) {
spliceIndex++;
} else {
theMenus.children.splice(spliceIndex, 1);
}
}
}
};
filterFn(filterMenus);
return filterMenus;
},methods: {
togglePicker(status) {
this.pickerOpen = status;
this.setCellClick();
},
hidePicker() {
this.pickerOpen = false;
},
getWeekRangeDate(date) {
const dateNow = new Date(date);
const weekDay = dateNow.getDay();
const weekStart = dateNow.getTime() - 60 60 24 weekDay 1000;
const weekEnd = dateNow.getTime() + (6 - weekDay) 60 60 24 1000;
console.log("this.", this.isWeekEnd);
if (this.isWeekEnd) {
console.log("fdsafsweeeeekk");
return [dateFormat(new Date(weekEnd)), new Date(weekStart)];
}
return [dateFormat(new Date(weekStart)), new Date(weekEnd)];
},
setCellClick() {
const picker = this.$refs.picker;
const hoverCls = "cell-hover";
const selectCls = "cell-selected";
const pickHoverCls = "ivu-date-picker-cells-cell-range";
const that = this;
let weeksOne = [];
let weektwo = [];
let cells = document.getElementsByClassName("ivu-date-picker-cells-cell");
cells = [...cells];
const isSelected = (week) => week.classList.contains(selectCls);
const setAttr = (el, attr, val) => {
el.setAttribute(attr, val);
};
const removeFocus = () => {
for (let elem of cells) {
if (elem.classList.contains(pickHoverCls)) {
elem.classList.contains(selectCls) || elem.classList.remove(pickHoverCls);
}
}
};
const removeCls = (cells, cls) => {
for (let el of cells) {
if (el.classList.contains(cls)) {
el.classList.remove(cls);
}
}
};
const whenHover = (cellWeeks) => {
removeFocus();
for (let week of cellWeeks) {
week.classList.add(pickHoverCls);
}
};
const addSelected = (cellWeeks) => {
for (let week of cellWeeks) {
// week.style.backgroundColor = "#2d8cf0";
week.classList.add(selectCls);
}
};
// 获取到点击的日期 yyyy-MM-DD
const whenClick = (cell) => {
const date = cell.getElementsByTagName("em")[0];
const cellCls = cell.classList;
const cells = cell.parentNode.parentNode.parentNode;
const yearMonth = cells.getElementsByClassName("ivu-date-picker-header")[0];
const [yearSpan, monthSpan] = yearMonth.getElementsByClassName("ivu-date-picker-header-label");
let year = +(yearSpan.innerHTML).slice(0, (yearSpan.innerHTML.length) - 1);
let month = +(monthSpan.innerHTML).slice(0, (monthSpan.innerHTML.length) - 1);
if (cellCls.contains("ivu-date-picker-cells-cell-prev-month")) {
month = month - 1;
if (month === 0) {
year = year - 1;
month = 12;
}
}
if (cellCls.contains("ivu-date-picker-cells-cell-next-month")) {
month = month + 1;
if (month === 13) {
year = year + 1;
month = 1;
}
}
const clickDateNow = ${year}-${month}-${date.innerHTML};
this.selectDate = this.getWeekRangeDate(clickDateNow)[0];
console.log("fas", this.selectDate);
// that.$set(that.selectDate, 0, that.getWeekRangeDate(clickDateNow)[0]);
// that.$set(that.selectDate, 1, that.getWeekRangeDate(clickDateNow)[1]);
};
cells.forEach((cell, index) => {
cell.onmouseover = function () {
let cellWeeks = cells.slice(Math.floor((index + 1) / 7) 7, Math.ceil((index + 1) / 7) 7);
cellWeeks = [...cellWeeks];
// removeCls(weeksOne, pickHoverCls);
whenHover(cellWeeks);
// removeCls(cellWeeks, pickHoverCls);
// removeCls([cell], pickHoverCls);
};
cell.onclick = function (ev) {
let cellWeeks = cells.slice(Math.floor((index + 1) / 7) 7, Math.ceil((index + 1) / 7) 7);
// addSelected([...cellWeeks]);
whenClick(cell);
that.hidePicker();
// ev.stopPropagation();
}
});
},
init() {
// this.setCellClick();
},
clickDate() {
this.$emit("on-change");
},
onMouseenter (event) {
const {target} = event
if (target.classList.contains('ivu-date-picker-cells-cell')) {
const n = Number(target.querySelector('em').innerHTML)
const date = new Date(this.$refs.picker.$refs.drop.$children[0].$refs.pickerTable.tableDate)
date.setDate(n)
const weekStart = (() => {
const d = new Date(date)
d.setDate(d.getDate() - d.getDay())
return d
})()
const weekEnd = (() => {
const d = new Date(date)
d.setDate(d.getDate() + 6 - d.getDay())
return d
})()
for (let i = n - date.getDay(); i < n + 7 - date.getDay(); i++) {
target.parentNode.querySelectorAll('.ivu-date-picker-cells-cell').forEach(element =>
{
if (element.querySelector('em').innerHTML==i)
element.classList.add('ivu-date-picker-cells-cell-hover')
}
)
}
// console.log(date)
}
// console.log("dfsa", event.target)
// this.setCellClick();
},
onMouseout (event) {
const {target} = event
if (target.classList.contains('ivu-date-picker-cells-cell')) {
const n = Number(target.querySelector('em').innerHTML)
const date = new Date(this.$refs.picker.$refs.drop.$children[0].$refs.pickerTable.tableDate)
date.setDate(n)
for (let i = n - date.getDay(); i < n + 7 - date.getDay(); i++) {
target.parentNode.querySelectorAll('.ivu-date-picker-cells-cell').forEach(element =>
{
if (element.querySelector('em').innerHTML==i)
element.classList.remove('ivu-date-picker-cells-cell-hover')
}
)
}
}
}
},
mounted() {
this.init();
// this.setCellClick();
},