掘友等级
获得徽章 0
一、监听路由从哪儿来到哪儿去
watch:{
$route(to,from){
console.log(from.path);//从哪来
console.log(to.path);//到哪去
}
}
二、监听路由变化获取新老路由信息
watch:{
$route:{
handler(val,oldval){
console.log(val);//新路由信息
console.log(oldval);//老路由信息
},
// 深度观察监听
deep: true
}
}
三、监听路由变化触发方法
methods:{
getPath(){
console.log(1111)
}
},
watch:{
'$route':'getPath'
}
四、全局监听路由
在app.vue的create种加入下面代码,然后进行判断
this.$router.beforeEach((to, from, next) => {
console.log(to);
next();
});
/*两个数之间各位数求和,公式方法*/
function sumAll(arr) {
return (arr[0] + arr[1])*(Math.abs(arr[0] - arr[1]) + 1)/2; (a+b)×(b-a+1)÷2
}
/* 获取滚动条距顶部高度 */
function getPageScrollTop() {
let a = document;
return a.documentElement.scrollTop || a.body.scrollTop;
}
JSON.parse() // string转object
JSON.stringify() // object转string
我在用localStorage 存储常用数据的时候,这两个方法经常会用到,
# 日常笔记
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要使用上面的str1,必须使用下面的方法先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后,就可以这样读取:
Alert(obj.name);
Alert(obj.sex);
特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。
二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
注意:
上面的几个方法中,除了eval()函数是js自带的之外,其他的几个方法都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法,则说明您的json包版本太低。
// 纯属个人笔记,无关其他
-
WU
最近接到一个小改动的需求:列表展示图片时,要求在不挤压拉伸图片的情况下,展示图片相对居中的那一部分,例如:竖向长方形的图片,就要去头去尾展示中间的部分,横向长方形的图片,就要去左去右;像很一段时间,并没有找到合适的解决方法;看到某一段网友另辟蹊径的方法:设为背景图,
.dd{
display: block;
width: calc(50% - 5px);
height: 1px;
padding: 0 0 48% 0;
float: left;
overflow: hidden;
background-image:url('../images/img.png');
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
其中background-image是通过vue的语句动态加载的,效果看图片我截取了列表和预览效果;
.class{
position: -webkit-sticky; /* Safari */
position: sticky;
top:20px;
}
最近整理收藏的时候发现的一个很好用的点,就是兼容性需要着重考虑,如果单纯是用于微信web真的很实用
copy-text:
sticky 英文意思是粘贴,所以可以把它称之为粘性定位。
它基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像相对定位,而当页面滚动超出目标区域时,它的表现就像fixed定位,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
.class{
position: -webkit-sticky; /* Safari */
position: sticky;
top:0px;
background-color:pink;
border: 2px solid #444;}
/* 小写字母*/
export function validateLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母*/
export function validateUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母*/
export function validatAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/* 手机号码*/
export function validatePhone(str) {
const phone = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
return phone.test(str)
}
/* 身份证*/
export function validateIdCard(str) {
const isIDCard1 = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
return isIDCard1.test(str)
}
/* 邮箱*/
export function validateEmail(str) {
const isEmail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
return isEmail.test(str)
}
padding-bottom: env(safe-area-inset-bottom);
兼容iPhoneX
下一页