时间正计时的处理
时间倒计时的处理
每隔几秒处理一次
各种数据类型的处理
数组中的符合条件的某项
const object = [{
tag_id: 1,
tag_name: "行为"
},
2, {
tag_id: 3,
tag_name: "行为"
},
4, 5
]
// 第一种：
let arrId = []
object.forEach((val) => {
if (typeof val === 'object') {
arrId.push(val.id)
} else {
arrId.push(val)
}
})
console.log(arrId)//[1,2,3,4,5]
// 二种：
// 使用 reduce 来构建结果数组
const result = object.reduce((acc, item) => {
if (typeof item === 'object' && item !== null && 'tag_id' in item) {
// 如果元素是对象并且包含 tag_id 属性，则添加 tag_id 到结果数组
acc.push(item.tag_id);
} else if (typeof item === 'number') {
// 如果元素是数字，则直接添加到结果数组
acc.push(item);
}
return acc;
}, []);
console.log(result); //[1,2,3,4,5]
修改数组周某对象中的key名字
const object = [{ tag_id: 1, tag_name: "行为" }, { tag_id: 2, tag_name: "行为" }, ]
//把每一项的 tag_id改为value,tag_name改为name
const newObject = object.map(item => ({
value: item.tag_id,
name: item.tag_name
}));
console.log(newObject);
//输出如下：
[{ value: 1, name: "行为" }, { value: 2, name: "行为" }, ]
请求接口时为什么要用async/waait
// async/await
async getBooksByAuthorWithAwait(authorId) {
const books = await bookModel.fetchAll();
return books.filter(b => b.authorId === authorId);
}
// promise
getBooksByAuthorWithPromise(authorId) {
return bookModel.fetchAll()
.then(books => books.filter(b => b.authorId === authorId));
}
async function requestSomething() {
console.log(111);
const something = await getSomething(); // 这时something会等到异步请求的结果回来后才进行赋值，同时不会执行之后的代码
console.log(something) console.log(333); }
requestSomething() //这个时候会输出 111，222，333
某元素是否存在
?.（可选链运算符）
作用就是判断这个对象（this.element）下的（Object）下的（value）下的（length）是否为null或者undefined， (如果没有加 ?. ，有的时候会报length是null 的错误，或者说 null length 没有定义，然有了?. 就省去了好多麻烦) 当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，
const obj = {hh: 'xxx'}
console.log(obj?.hh?.length) //3
console.log(obj?.hh) // xxx
??
?? 双问号后面接的就是默认值。 当然是在没有值得时候会默认 ?? 后边的值，但是有了默认值 ，那么 ?? 后的值也就不会在去默认了，也就是变成了 赋默认值。就跟三木运算（let x = 6,y = 2; z = x>y ? x-y : x+y; ）一样，不满足会执行 : 后边的。
let ibo = {a:{b:1}}
console.log(ibo?.a?.b ?? 111) //b有值的话就是1，不然就是111
let customer = {
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "内涵段子";
console.log(customerCity); // “内涵段子”
输入9-10数字，三位间隔一个空格，最后输入四位
123 456 789 123 456 7890 输入框使用maxlength="12" type='number' @input='format'
format方法：
format(e) {
let reg = new RegExp(/^[0-9]+$|^$|^\s$/)//
if (!reg.test(e)) e.substr(0, e.length - 1)
//以上仅可输入数字，别的数字剪切掉，但一下输入多个数字时暂没控制
let arr = e ? e.split('') : [] //先判断字符串是否有字符，然后进行分割成数组
let newStr = ''//定义一个新字符串，不要直接给要使用的字段负值，会出现重复的情况
arr.forEach((i, index) => {
newStr += i
if(newStr.length < 10){//处理10位时不在进行分割123 456 7890
if((index + 1) % 3 == 0 && (index !== arr.length - 1)) {
newStr += ' '
}
}
})
this.conferenceNo = newStr
},
使用some/every
some:给数组每一项都运行一个函数，同every相反，只要有一项符合条件，就跳出循环，返回true，否则返回false
//循环数组判断有没有时长为0 的，有的话就提示且不能往下执行
isAddCourse() {
const dtoLength = this.showInfo.courseDirectoryDTOList
let isTrue = dtoLength.some(item => {
let isZero = item.courseDirectoryResources.some(val => {
return val.minLearnTime == 0
})
return isZero
})
return isTrue
},
//至少添加一个内容，不然禁止往下执行
isLength() {
const dtoLength = this.showInfo.courseDirectoryDTOList
let isTrue = dtoLength.some(item => {
return item.courseDirectoryResources.length > 0
})
return isTrue
},
删除json数据（json数组）中的指定元素
场景：form表单中查询数据没数据时不传该参数
const jsonData = {a:1,b:2,c:3}
delete jsonData.a
concole.log(jsonData)//{b:2,c:3}
若要删除json数组中某歌元素的json，则是用下面的方式：
const jsonArr = new Array();
jsonArr.push({a:1,b:2,c:3});
jsonArr.push({a:1,b:2,c:3});
jsonArr.push({a:1,b:2,c:3});
delete jsonArr[1].a
remove方式删除数组中指定元素：
const objArray = ['1','2','3','4'];
objArray.remove('1')
//定义js数组删除元素
Array.prototype.remove = function(val){
const index = this.indexOf(val)
if(index > -1){
this.splice(index,1)
}}
拖拽功能
对clientx,offsetTop，，，，，的理解 自定义指令实现拖拽 element-ui弹窗在可视区域内拖拽 js实现拖拽 ie兼容性 cn.vuejs.org/v2/guide/cu…
直播会议中弹窗在可视区域内的拖拽： 考虑边界情况
import Vue from 'vue'
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog-drag');
// dialogHeaderEl.style.cursor = 'move';
dialogHeaderEl.style.cssText += ';cursor:move;';
dragDom.style.cssText += ';top:0px;';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = (function() {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle[attr];
} else {
return (dom, attr) => getComputedStyle(dom, false)[attr];
}
})();
dialogHeaderEl.onmousedown = e => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
const screenWidth = document.body.clientWidth; // body当前宽度
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
const dragDomheight = dragDom.offsetHeight; // 对话框高度
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
// 获取到的值带px 正则匹配替换
let styL = sty(dragDom, 'left');
let styT = sty(dragDom, 'top');
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
// eslint-disable-next-line no-useless-escape
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
// eslint-disable-next-line no-useless-escape
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
} else {
styL = +styL.replace(/\px/g, '');
styT = +styT.replace(/\px/g, '');
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
let left = e.clientX - disX;
let top = e.clientY - disY;
// 边界处理
if (-left > minDragDomLeft) {
left = -minDragDomLeft;
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
}
if (-top > minDragDomTop) {
top = -minDragDomTop;
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
})
不考虑边界，可随意移动
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog-drag')
dialogHeaderEl.style.cursor = 'move'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dialogHeaderEl.onmousedown = (e) => {
console.log(dialogHeaderEl.offsetLeft)
console.log(dialogHeaderEl.offsetTop)
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
// 获取到的值带px 正则匹配替换
let styL, styT
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY
// 移动当前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px`
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
小程序和h5页面的交互
通过url链接打开小程序：
developers.weixin.qq.com/community/d…
对子模块的操作：git-scm.com/book/zh/v2/…
新项目操作流程：
怎么拉取仓库子模块的
在A项目上怎么把当前分支的代码推倒B项目上：
cloud.tencent.com/developer/a…
新项目不适用内网时的ssh使用：
本地打开.ssh文件夹open ~/.ssh
submodule 子模块简明教程 : zhuanlan.zhihu.com/p/404615843
cat >> ~/.ssh/config << EOF
Host gitlab-online.100url.cn
Port 23456
EOF
