1、js如何将136分钟转化为几小时，几分钟
return (Math.floor(minutes/60) + "小时" + (minutes%60) + "分" );
2、js如何根据index值删除数组中的指定对象
deleteLabel(index){
//labelBox 为数组
this.labelBox.splice(index,1);//从数组中移除要删除的标签
},
3、JSON字符串转换为JSON对象
var str = '{ "name": "cxh", "sex": "man" }';
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象 或
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
obj.toJSONString(); //将JSON对象转化为JSON字符 或
JSON.stringify(obj); //将JSON对象转化为JSON字符
//去掉数组最外层的引号
eval(res.data)/
4、forEach添加循环（修改）
let _this = this;
_this.views[1].forEach(function(v, index) {
if (v.ishave == false) {
let key = 'ishave'
let value = 3;
v[key] = value
} else {
v.ishave = 3;
}
_this.haveTask.forEach(function(a, i) {
if (v.date == a.keyTwo) {
v.ishave = a.value;
}
})
})
5、消息提示
//这个是个人封装 不适用所有人
this.$message.info('修改失败了,稍候再试试吧');
6、延时器
setTimeout(() => {
console.log（'延期一秒执行'）；
}, 1000);
7、如何控制uniapp底部导航栏的显示隐藏
uni.hideTabBar(); //隐藏tab
uni.showTabBar(); //显示tab
8、Promise.all
Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。所有的 Promise 对象都成功时返回的是一个结果数组，一旦有任何一个 Promise 对象失败则立即返回失败。
let ps1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-1')
}, 6000)
})
let ps2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-2')
}, 3000)
})
let pf1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-1')
}, 4000)
})
let pf2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-2')
}, 2000)
})
Promise.all([ps1, ps2]).then(arr => {
console.log(arr) // 执行成功，输出：['success-1', 'success-2']
}).catch(error => {
console.log(error)
})
Promise.all([ps1, pf1, ps2, pf2]).then(arr => {
console.log(arr)
}).catch(error => {
console.log(error) // 执行失败，输出：fail-2
})
Promise.all 可用于类似一个页面有多个请求，需要 loading 等待多个请求都执行完再渲染数据，有一个请求异常时，跳转错误页面。
注意：Promise.all 的正确返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。
9、Promise.race
Promise.race 是赛跑的意思，Promise.race 中的 Promise 数组中谁先返回成功或失败的结果，整体就返回那个结果。
let ps1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-1')
}, 6000)
})
let ps2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-2')
}, 3000)
})
let pf1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-1')
}, 4000)
})
let pf2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-2')
}, 2000)
})
Promise.race([ps1, ps2]).then(result => {
console.log(result) // 执行成功，输出：success-2
}).catch(error => {
console.log(error)
})
Promise.race([ps1, ps2, pf1, pf2]).then(result => {
console.log(result)
}).catch(error => {
console.log(error) // 执行失败，输出：fail-2
})
Promise.race 中的各 Promise 的执行顺序是无序的。可用于对某些不支持设置 timeout 的请求模拟请求超时和中止请求。
10、Promise.allSettled
Promise.allSettled 中的 Promise 数组全部执行完才会返回一个对象数组，其中包含了每个 Promise 的执行结果，且都有一个 status 字段，fulfilled 表示成功，rejected 表示失败。
let ps1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-1')
}, 6000)
})
let ps2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success-2')
}, 3000)
})
let pf1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-1')
}, 4000)
})
let pf2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('fail-2')
}, 2000)
})
Promise.allSettled([ps1, ps2, pf1, pf2]).then(arr => {
console.log(arr) // 输出：[{status: "fulfilled", value: "success-1"}, {status: "fulfilled", value: "success-2"}, {status: "rejected", reason: "fail-1"}, {status: "rejected", reason: "fail-2"}]
})
Promise.allSettled 返回结果数组 arr 与请求的 Promise 数组顺序一致，与异步请求响应返回的顺序无关。Promise.allSettled 可通过返回的数组中的 status 字段，用于判断成功和失败的数量，如上传图片成功几张、失败几张。
注意：如果提示“Promise.allSettled is not a function”，请安装“promise.allsettled”。
11、判断手机号码是否正确
panphone(){
if(this.phone!=''){
var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
if (strTemp.test(this.phone)) {
}else{
this.$message.info('请输入正确的手机号');
this.phone='';
}
}
},
12、判断邮箱是否正确
panemail(){
if(this.email!=''){
Var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
var obj = this.email; //要验证的对象
if(!reg.test(obj)){ //正则验证不通过，格式不对
this.$message.info('邮箱格式不正确');
this.email='';
}
}
}
13、微信小程序分享（button）按钮页面布局问题
html
<view class="share-img-box">
<image src="../../static/home/share.png" style="width: 38upx;height: 38upx;" mode=""></image>
<button open-type="share" bindcontact="handleContact" class="openChat"></button>
</view>
css 此处用的 scss
.share-img-box {
width: 38upx;
height: 38upx;
position: relative;
.openChat{
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 999;
}
}
这样布局可以自定义button按钮样式，解决button按钮有边框的问题。
14、uniapp 在微信小程序当中跳转微信小程序
go(){
uni.navigateToMiniProgram({
appId:'wx30821321432afd24',//这个是要跳转的小程序appid 值为示例
path: 'page/index/index?code='+this.code,//可以传参 如果多个参如下
path: 'page/index/index?code='+this.code+'&code2='+this.code2+'&code3='+this.code3,//传多个参数示例 & 是拼接的不是参数名称，不可以省略
success: res => {
// 打开成功
console.log("打开成功", res);
},
fail: err => {
console.log(err);
}
});
}
15、uniapp 微信小程序分享 给好友
首先需要有一个分享button
html
<button open-type="share" bindcontact="handleContact" class="openChat"></button>
js
//和onlond 在同一级
onShareAppMessage(res) {
return {
title: '欢迎浏览',
path: '/pagesA/home/article-details?type='+ this.type + '&id='+this.id+ '&source='+ this.source,
imageUrl: this.particulars.coverUrl
}
},
16、uniapp 微信小程序分享到朋友圈
需要点击右上角的三个点进行微信朋友圈分享
js
//和onlond 在同一级
onShareTimeline() {
return {
title: '欢迎浏览',
path: '/pagesA/home/article-details?type='+ this.type + '&id='+this.id+ '&source='+ this.source,
imageUrl: this.particulars.coverUrl
}
},
17、window10 如何切换桌面
1、创建新的虚拟桌面：“Win"+"Ctrl"+"D"
2、关闭当前虚拟桌面：“Win"+"Ctrl"+"F4"
3、切换虚拟桌面：“Win"+"Ctrl"+"左/右" 切换界面组合键 左右为上下左右键的 左右
18、三元运算符多条件判断
:note2="item.status == 0 ? '备料中' : item.status == 1 ? '部分入库' : '全部入库'"
19、鼠标样式
cursor:pointer;//变小手
cursor:auto;//标准光标
cursor:default;//标准箭头
cursor:hand;//手形光标
cursor:wait ;//等待光标
cursor:text;//I形光标
cursor:vertical-text;//水平I形光标
cursor:no-drop;//不可拖动光标
cursor:not-allowed;//无效光标
cursor:help;//帮助光标
cursor:all-scroll;//三角方向标
cursor:move;//移动标
cursor:crosshair;//十字标
20、css 常用样式
//禁止文字换行
white-space:nowrap;
//只让背景颜色透明
background-color:rgba(245,187,0,0.1);
//弹性盒 右对齐
justify-content: flex-end;
//弹性和垂直布局
flex-direction:column;
align-items:center;
//让最后一个数组边框不显示
.xxx:nth-last-child(1){
.xian{
border:none;
margin:0 auto;
}
}
//a标签去掉下划线
a{
text-decoration:none;
}
//首行缩进两个字符
text-indent:2em;
//单行文本超出显示点点点
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
//多行文本超出显示点点点
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
//vue超出隐藏方法
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
//input框number类型下右侧加减号去除
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
//背景模糊
backdrop-filter: blur(5px);
//滚动条样式
::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
21、element ui 配置
//输入框icon 在前面
prefix-icon="el-icon-search"
//输入框icon 在后面
suffix-icon="el-icon-date"
//如何使用穿透修改样式
::v-deep .el-progress-bar__outer{
background-color: #81C042 !important;
}
22、打印文件强制分页
//强制分页
<div style="page-break-after: always;"></div>
//关联性较强的内容必须在一页展示
<div style="page-break-inside: avoid;">C</div>
23、Echarts 文档
//曲线折线
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
24、循环对象添加key值
xun() {
let _this = this;
var obj = {};
this.city.forEach(function(v, index) {
obj[v.city] = v;
});
console.log(JSON.stringify(obj));
}
25、常用数字方法
//数字绝对值
Math.abs(-1)//1
26、split()同时筛选多条件
his.labelBox = str.split(/[,，]/); //同时筛选 中文, 和英文,
//将字符串以,号分割成数组
let str = "aaa,bbb,ccc";
let arr = str.split(',');
console.log(arr);//true
27、uniapp退出应用
//退出应用
refundApplication(){
if (plus.os.name.toLowerCase() === 'android') {
plus.runtime.quit();
}
else{
const threadClass = plus.ios.importClass("NSThread");
const mainThread = plus.ios.invoke(threadClass, "mainThread");
plus.ios.invoke(mainThread, "exit");
}
},
28、uniapp隐藏显示tabBar
uni.hideTabBar()//隐藏
uni.showTabBar()//显示
29、监听滚轴滚动方向
//监听页面滚动事件
function scrollEvent() {
window.onscroll = function(e){
scrollFunc();
if(scrollDirection == 'down'){
//页面向下滚动要做的事情
}
else if(scrollDirection == 'up'){
//页面向上滚动要做的事情
}
}
}
30、如何去掉数组两边的引号’[1,2]’
let map = '[{name:'娄渊洋'},{name:'娄渊洋'},{name:'娄渊洋'},{name:'娄渊洋'},{name:'娄渊洋'}]';
map.forEach(function(item,index){
item.value = eval(item.value)
})
31、如何安装使用cnpm 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
32、根据出生日期,如何获取年龄?
//计算年龄
//birthday '1998-11-16'
getAge(birthday){
let d = new Date(birthday)//生日
let t = d.getTime(d) // 转换为时间戳
let t1 = Date.parse(new Date());//获取当前时间戳
let t2 = t1 - t;//计算时间戳之差
t2 = t2 / 1000 / (60 * 60 * 24 * 30 * 12)//将差值转换为年
t2 = Math.floor(t2)//向下取整
this.ageNum = t2;
console.log(t2);
},
33、Element Ui 日期选择限制?
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
今天和之后的日期
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
}
},
}
}
今天和之前的日期
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
}
},
}
}
34、vue强制重绘?
this.$forceUpdate()
35、vue监听页面滚动到底部
mounted() {
let _this = this;
window.onscroll = function(){
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
//滚动条到底部的条件
if(scrollTop+windowHeight >= scrollHeight-10){
//到了这个就可以进行业务逻辑加载后台数据了
console.log("到了底部");
}
}
},
36、element ui el-table-column type=“selection”
<el-table-column show-overflow-tooltip type="selection" :selectable="isShowChoose" width="55"></el-table-column>
methods里面
//是否显示
isShowChoose(row){
return row.memberFlag === 1 ? true : false;
},
37、uniapp 打包后提示版本不同是否勿略问题
可以在manifest.json文件的源码视图中配置忽略这个提醒，方式如下：
"app-plus": {
"compatible": {
"ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
},
},
38、element ui 日期选择固定选择年月日格式
value-format="yyyy-MM-dd"
39、vue绑定回车事件
element ui 情况下
@keyup.enter.native="fetchData()"
正常情况下
@keyup.enter=“方法名”
40、正则替换域名
let reg = /^http(s)?:\/\/(.*?)\//;
let ToReplace = 'https://apd-2a704642d3661750e5feadd9d50cd790.v.smtcdns.com/'
url = url.replace(reg, ToReplace)
console.log(item.url,'未正则')
console.log(url,'域名')
//正则判断
if (/[0-9][0-9]{0,62}(\.[0-9][0-9]{0,62})+\.?/.test(item.url) == false)
41、解决浅拷贝问题(深拷贝)
JSON.parse(JSON.stringify(this.meSend))
42、vue 鼠标悬浮div显示文字
<div class="detailed-introduction" v-bind:title="reportData.descript">
{{reportData.descript}}
</div>
43、快速取出对象中的某一值
console.log(val.map(item => item.staffId))
43、解决小数相加精度差的问题
//number 是要四舍五入的数 m是保留几位小数
Math.round(Math.pow(10,m)*number)/Math.pow(10,m)
扫一扫
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
