把时间转换为相对时间
用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;
}