前端小技巧

内容为开发中遇到的一些小技巧，平时可能会用到

---

vue页面之前传递参数

 this.$router.push({
        path: "/eventsdetails",
        query: { articleId: id, type: 2, article_type: 1 }
      });

获取

this.$route.query.articleId;

video标签图片自适应只需要设置

width: 100%; height: 100%; object-fit: fill

图片验证码，当验证码图片不能刷新时，在后面添加随机数即可

res.data + '?' + Math.random()

对象数组赋值

list.push({type: type});

移动端页面滚动事件

var mo=function(e){e.preventDefault()};
  /***禁止滑动***/
  
function stop(){
    document.body.style.overflow='hidden';
    document.addEventListener("touchmove",mo,false);//禁止页面滑动
}
/***取消滑动限制***/
function move(){
    document.body.style.overflow='';//出现滚动条
    document.removeEventListener("touchmove",mo,false);
}

css实现渐变色

 background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;

get通过url的形式，在后面拼接参数。只能以文本的形式传递参数

index.php？key=value&key=value

post 可以传多种类型的值

当需要向后端传递JSON数据，用post方法，除非是jquery中的getJson

判断undefined

typeof(inspection) == "undefined"

vue阻止事件冒泡

<button @click.stop="show">vue点我</button>

就是在事件上加上stop就可以啦 但是change事件你写成@change.stop却没有用。change事件就不是写stop啦。而是在这个change的父元素上面加个@click.stop

<div @click.stop>
<button @change="show">vue点我</button>
</div>

css深入选择

在样式选择器前加上 /deep/

/deep/.uploader-input

本地缓存数据

cookie 同ip下都可以公用。

同源窗口（协议、域名、端口一致），不同页面可以共享localStorage值，通过跳转的页面可以共享sessionStorage值。