片段

作者: 隔壁老王z | 来源:发表于2018-11-02 16:28 被阅读0次

反焦虑思维
片段（片段练笔）
商品放大镜效果
第三次作业
shell-01
记忆片段片段记忆
8、RIA特训第四周
#知识体系精深营#+5月份+第4次作业+第23组+九妹妈
vscode 代码片段设置
片段

黑白和彩色切换：

//给图片添加：
       img{
            height: 100%;
            max-width: 100%;
            transition: all .3s ease;
            /* -webkit-filter: grayscale(100%); */
            filter: grayscale(100%);
            opacity: .66;
        }
        img:hover{
            filter: grayscale(0%);
            opacity: 1;
        }

hover一个元素另一个变色：

.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){  
        background-color: #fff;
}

mouseover和mouseout切换图片：

<span @mouseover="pic = star1_img" @mouseout="pic = star_img">
        <img :src="pic" alt="">
</span>
data () {
      return {
      pic: require('../../static/img/star1.png'),
      star_img: require('../../static/img/star1.png'),
      star1_img:require('../../static/img/star.png')
      }
  }

获取滚动条距离的兼容写法：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

因为当0与undefined进行运算，默认返回的是后面一个，window.pageYOffset放在中间不会报错。

对象的解构赋值实际上使得取对象的键值变得更方便：

const { active, count, swipes, deltaX, width } = this;
//再也不用重复使用this.active、this.count等取值，直接用active、count代替

登录成功后返回上次停留页面
document.referrer指的是打开当前页面的页面，如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。

var prevLink = document.referrer;  
if($.trim(prevLink)==""){  
    location.href = 'www.example.com/index.html';   //回到首页
}else{  
    if(prevLink.indexOf('www.example.com')==-1){    //来自其它站点  
        location.href = 'www.example.com/index.html';  
    }  
    if(prevLink.indexOf('register.html')!=-1){      //来自注册页面  
        location.href = 'www.example.com/index.html';  
    }  
    location.href = prevLink;  //其他情况
}

git merge的冲突判定机制如下：先寻找两个commit的公共祖先，比较同一个文件对于公共祖先的差异，然后合并这两组差异。如果双方同时修改了一处地方且修改内容不同，就判定为合并冲突，依次输出双方修改的内容。
实现文字溢出时使用省略号表示：

//包裹文字的盒子设置css：
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

渐变边框

<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>

.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: '';
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
}

.first:before {
  background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
  background-image: linear-gradient(0deg, orange, red);
}
.third:before {
        background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}

image.png