以下是: - 将秒数转换为各种时间格式 - 三种在Vue中定义全局方法的方法 - 解决图片底部的间隙问题 - 修复路由跳转时的错误 - 实现Vue登录功能
1.js转化秒数为时分秒
/**
* 把秒数转化为天、时、分、秒
* 参数value是秒数
*/
function formatSeconds(value) {
var secondTime = parseInt(value) // 秒
var minuteTime = 0 // 分
var hourTime = 0 // 小时
var dayTime = 0 // 天
var result = ''
if (value < 60) {
result = secondTime + '秒'
} else {
if (secondTime >= 60) { // 如果秒数大于60，将秒数转换成整数
// 获取分钟，除以60取整数，得到整数分钟
minuteTime = parseInt(secondTime / 60)
// 获取秒数，秒数取佘，得到整数秒数
secondTime = parseInt(secondTime % 60)
// 如果分钟大于60，将分钟转换成小时
if (minuteTime >= 60) {
// 获取小时，获取分钟除以60，得到整数小时
hourTime = parseInt(minuteTime / 60)
// 获取小时后取佘的分，获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60)
if (hourTime >= 24) {
// 获取天数， 获取小时除以24，得到整数天
dayTime = parseInt(hourTime / 24)
// 获取小时后取余小时，获取分钟除以24取余的分；
hourTime = parseInt(hourTime % 24)
}
}
}
if (secondTime > 0) {
secondTime = parseInt(secondTime) >= 10 ? secondTime : '0' + secondTime
result = '' + secondTime + '秒'
}
if (minuteTime > 0) {
minuteTime = parseInt(minuteTime) >= 10 ? minuteTime : '0' + minuteTime
result = '' + minuteTime + '分' + result
}
if (hourTime > 0) {
result = '' + parseInt(hourTime) + '小时' + result
}
if (dayTime > 0) {
result = '' + parseInt(dayTime) + '天' + result
}
}
return result
}
console.log(formatSeconds('123131'));// 1天10小时12分11秒
2.js获取当前时间
let time = new Date()
console.log(time) //打印结果为：Wed Aug 31 2022 10:47:48 GMT+0800 (中国标准时间)
console.log(time.toLocaleString()) //打印结果为：2022/8/31 10:49:41
console.log(time.toLocaleDateString()) //打印结果为：2022/8/31
console.log(time.toDateString()) //打印结果为：Wed Aug 31 2022
console.log(time.toLocaleTimeString()) //打印结果为：10:53:04
console.log(time.toTimeString()) //打印结果为：10:54:25 GMT+0800 (中国标准时间)
如果有一个需求，需要将当前日期格式化为yyyy-MM-dd hh:mm:ss
function timestampToTime(times) {
let time = times[1]
let mdy = times[0]
mdy = mdy.split('/')
let month = parseInt(mdy[0]);
let day = parseInt(mdy[1]);
let year = parseInt(mdy[2])
return year + '-' + month + '-' + day + ' ' + time
}
let time = new Date()
let nowTime = timestampToTime(time.toLocaleString('en-US',{hour12: false}).split(" "))
console.log(nowTime)
//打印结果为：2022-8-31 11:08:34
3.vue定义全局方法的三种方法
方法一:使用Vue.prototype
//在mian.js中写入函数
Vue.prototype.getToken = function (){
...
}
//在所有组件里可调用函数
方法二:使用exports.install+Vue.prototype
exports.install = function (Vue, options) {
Vue.prototype.getToken = function (){
...
};
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
在用了exports.install方法时，运行报错exports is not defined
解决方法
export default {
install(Vue) {
Vue.prototype.getToken = {
...
}
}
}
方法三：使用全局变量模块文件
Global.vue文件：
<script>
const token='12345678';
export default {
methods: {
getToken(){
....
}
}
}
</script>
在需要的地方引用进全局变量模块文件，然后通过文件里面的变量名字获取全局变量参数值
<script>
import global from '../../components/Global'//引用模块进来
export default {
data () {
return {
token:global.token
}
},
created: function() {
global.getToken();
}
}
</script>
4.img图片下显示空隙的不同解决办法
在做项目的时候遇到了这个问题。。html中img图片下方出现空隙，但又找不到空隙是从哪里出现的，那么这个空隙到底是哪里来的呢？ 这是一个很常见的问题，出现这个问题的原因其实很基本。。就是，img是一个行内元素，而设立html标准的是欧洲而不是亚洲，所以为了正确显示带有尾巴（比如j、q、y等）英文字母，就在下方留了一些空白的地方。 所以要解决这个方法其实就是解决文字样式与图片样式的问题。
那么现在提供一些解决这个空白bug的方法：
1.将图片转换为块级元素，即在img上添加css样式display:block;
2.改变图片的垂直对齐方式，即在img上添加css样式vertical-align:top或者vertical-align:bottom;
3.如果这个img是包含在父元素内的话，比如一个div中包含着一个img，还可以设置父元素的css样式来解决这个空白bug。 设置父元素div的行内高度css样式line-height:0;
4.如果父元素中没有文字的话，可以在父元素div中添加字体大小的css样式font-size:0;
5.路由跳转报错:# Navigation cancelled from “/...“ to “/...“ with a new navigation
原因: "这个错误是 vue-router 内部错误，没有进行 catch 处理，导致的编程式导航跳转问题，向同一地址跳转时会报错的情况（push 和replace 都会导致这个情况的发生）。
解决一: 针对于路由跳转相同的地址添加 catch 捕获一下异常。
this.$router.push({path:'/register'}).catch(err => { console.log(err) })
6.vue登录功能实现 blog.****.net/weixin_5269…
7.js 快速找出两个数组中的不同元素或对象
js 快速找出两个数组中的不同元素
var arr1 = [0,1,2,3,4,5];
var arr2 = [0,4,6,1,3,9];
function getArrDifference(arr1, arr2) {
// var newArr = [...arr1,...arr2]
// return newArr.filter(function(v, i, arr) {
// return arr.indexOf(v) === arr.lastIndexOf(v);
// });
return arr1.concat(arr2).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
}
console.log(getArrDifference(arr1,arr2));
// 输出：(4) [2, 5, 6, 9]
js 快速找出两个数组中的不同对象
const arr1 = [
{id: "145", firstname: "dave", lastname: "jones"},
{id: "135", firstname: "mike",lastname: "williams"},
{id: "148", firstname: "bob",lastname: "michaels"}
]
const arr2 = [
{id: "146", firstname: "dave", lastname: "jones"},
{id: "135", firstname: "mike", lastname: "williams"},
{id: "148", firstname: "bob", lastname: "michaels"}
],
newArr1 = arr1.filter(x => !arr2.some(y => y.id === x.id)),
newArr2 = arr2.filter(x => !arr1.some(y => y.id === x.id));
console.log(newArr1)// [{id: '145', firstname: 'dave', lastname: 'jones'}]
console.log(newArr2)// [{id: '146', firstname: 'dave', lastname: 'jones'}]
8.解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
报错如下图所示：
原因：
这个错误是 vue-router 内部错误，没有进行 catch 处理，导致的编程式导航跳转问题，向同一地址跳转时会报错的情况（push 和replace 都会导致这个情况的发生）。
方案二：
针对于路由跳转相同的地址添加 catch 捕获一下异常
this.$router.push({path:'/register'}).catch(err => { console.log(err) })
方案三：
在路由 router 里面加上以下这段代码
// 解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch(err => err);
};
//replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
if (onResolve || onReject)
return originalReplace.call(this, location, onResolve, onReject);
return originalReplace.call(this, location).catch(err => err);
};
相应文件及位置：
拓展
Vue Router中 router.push、router.replace、router.go 的区别
router.push(location) 相当于 window.history.pushState
想要导航到不同的 URL，则使用 router.push 方法。
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location) 相当于 window.history.replaceState
跟 router.push 很像，区别：它不会向 history 添加新记录，而是替换掉当前的 history 记录，点击返回会跳转到上上个页面。
router.go(n) 相当于 window.history.go
向前或者向后跳转n个页面，n可为正整数或负整数。可以通过 window.history.length 得到历史记录栈中一共有多少页。
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致
vuerouter中实现新窗口打开页面 blog.****.net/ZYS10000/ar…
原文地址: blog.****.net/ZYS10000/ar…
9.递归问题
// 找到与arr中相同id的那一项
findDataItemById(arr, id) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].children && arr[i].children.length > 0) {
var item = this.findDataItemById(arr[i].children, id)
// 这里的判断非常重要,是提前结束递归的条件
if (item) {
return item
}
}
if (arr[i].compTypeId && ((arr[i].compTypeId + '-' + arr[i].id) === id)) {
return arr[i]
}
}
// arr.forEach((ele) => {
// if (ele.children && ele.children.length > 0) {
// var item = this.findDataItemById(ele.children, id)
// if (item) {
// return item
// }
// }
// if (ele.compTypeId && ((ele.compTypeId + '-' + ele.id) === id)) {
// return ele
// }
// })
}
递归中注意事项
在递归函数中使用数组的forEach等方法,其中return语句是数组方法的返回值,并不是递归函数的返回值