Vue2.x -- 相对时间、登录成功后跳转地址判断、组件递归、页面滚动

把时间转换为相对时间

用dayjs插件实现

• npm安装

npm install dayjs --save

• 引入

import dayjs from 'dayjs'

• 如果是求相对时间,需要用到dayjs里面的relativeTime组件

import relativeTime from 'dayjs/plugin/relativeTime'

例子:实现封装相对时间的过滤器

import dayjs from 'dayjs'

import relativeTime from 'dayjs/plugin/relativeTime'

//语言
import 'dayjs/locale/zh-cn'

dayjs.extend(relativeTime)

//暴露过滤器
export const relateTime = (val) => {
    //to()是 现在到指定时间的相对时间 如:几秒前
    //当前时间以前用fromNow()
    //时间到当前 
    return dayjs().locale('zh-cn').to(val)
}

登录成功后返回上一页

需求:如果是正常登录,就跳转到个人页面,如果是被引导去登录的,登录成功后返回上一页
解决方法:在引导跳转前传入当前的地址路径,登录跳转前判断是否有传入的路径,没有的话就正常跳转

//引导页
this.$router.push({
	name:'login',
	params:{target:this.$route.path}
})

//登录页
//登录成功判断
if(this.$route.params.target){
	//有传入路径则跳转到路径
	this.$router.push({path:this.$route.params.target})
}else{
	//没传入路径则正常跳转
	this.$router.push({path:'/user'})
}

Vue组件自调用(组件递归)

用name来注册自身组件,然后在html中使用name定义的标签名

//父组件中使用子组件,并传入num
<count num="30"/>

//count子组件
<template>
	<div class="box">
        递归组件 {{num}}
        //一定要写出口条件,否则会成为死递归
        //如果子组件自身被调用的时候有传值和事件emit,则递归的时候也可以使用
        <items :num="num-1" v-if="num>0"/>
    </div>
</template>


<script>
	export default {
		props: ['num']
		name: "items",//自定义组件名
	}
</script>

页面滚动

 const element = document.querySelector("#commentTitle");//拿到元素
 //参数 behavior表示滚动方式
 //auto 默认, instant 和 smooth 表示 直接滚到底 和 使用平滑滚动
 //block 表示块级元素排列方向要滚动到的位置。
 //start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
 //inline 表示行内元素排列方向要滚动到的位置,其值与 block 类似。
 element.scrollIntoView({ behavior: "smooth", block: "start" });//控制元素

额外查漏补缺:

• textarea文本区域不可拉伸

	textarea{
		resize:none; 
	}