我的代码片段（组件库）

2019-11-19

常见UI以及相应代码片段：

1、上方小三角,类似消息的样式效果

父级relative，after绝对定位

&::after{
    content:' ';
    position: absolute;
    left: 5px;
    top: -6px;
    width:0;
    height:0;
    border-right:10px solid transparent;
    border-left:10px solid transparent;
    border-bottom:10px solid #F8F8F8;
  }

2、背景浮层

.black-bg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: .5;
  z-index: 1;
}

3、0.5px的边框

.border05(@border){
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: top left;
    border: 1px solid @border;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

4、文字超出宽度展示…

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

5、针对iphoneX等底部横条的css样式

@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (max-device-height: 896px) and (-webkit-min-device-pixel-ratio: 2){
  .bottom-wrap {
    padding: 50px 0;
  }
}

6、背景蒙层如果页面有滚动条不想让modal框随着页面滚动

解法一（非最优解）：
  this.yHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
document.body.style.position = 'fixed'
document.body.style.height = '100%'
document.body.style.width = '100%'
   // 关闭蒙层之后设置回原样
document.body.style.position = ''
document.body.style.height = ''
document.body.style.width = ''
window.scrollTo(0, this.yHeight)

解法二（在手机移动端比较完美的解法）：

bodyScroll(event) {  
  event.preventDefault();  
},
document.body.addEventListener('touchmove',this.bodyScroll,{ passive: false })  // 在弹出框的时候禁止触摸滚动事件
document.body.removeEventListener('touchmove',this.bodyScroll,{ passive: false })   // 在隐藏框的时候允许触摸滚动事件

7、超出打点

//单行
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
//多行
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;

8、横向排列，超出滑动展示，使用flex

// 父元素
display: flex;
overflow: scroll;
// 子元素
width: 100px;
height: 100px;
flex-shrink: 0;

9、点击图片淡出

@keyframes move{
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  .active{
    animation: move 1s;
  }

  <img className={load?"wrap-pic active":"wrap-pic"} src={item.selectedIcon} onLoad={()=>setLoad(true)}/>}

10、居中

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)

11、背景图（可以设置多张背景图）

background: url(img/zhixuandiwen1.png) 100% 0 no-repeat,url(img/zhixuandiwen2.png) 100% 0 no-repeat #fff;
background-size: 27%,32%;
background-repeat: no-repeat;
background-position: 100% 100%,0 100%;

12、小icon

// 外层最好加个flex，在同行显示
.ques-icon {
    background-image: url('./images/ques.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
    margin-left: 2px;
  }

13、弹窗样式

<div class="modal-wrap" v-if="showMask">
  <div class="modal">
    <div class="top">
      <div class="head">确定要发布带看悬赏吗？</div>
      <div class="content">购买后将不可更改，到期时未发放的贝壳币将自动退回</div>
    </div>
    <div class="foot">
      <div class="btn-block left" @click="showMask=false">取消</div>
      <div class="btn-block right" @click="sure">确定</div>
    </div>
  </div>
  <div class="mask"></div>
</div>

.modal-wrap{
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: .5;
    z-index: 1;
  }
  .modal{
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    background: #fff;
    border-radius: 5px;
    z-index: 2;
    .top{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 24px;
      .head{
        margin: 32px 0 12px;
        font-weight: bold;
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #222222;
        letter-spacing: 0;
        text-align: center;
        line-height: 18px;
      }
      .content{
        margin-bottom: 29px;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0;
        text-align: center;
        line-height: 20px;
      }
    }
    .foot{
      display: flex;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
      text-align: center;
      line-height: 16px;
      word-break: keep-all;
      .btn-block{
        border-top: 1px solid #F0F0F0;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        height: 44px;
        // margin: 14px 60px;
      }
      .right{
        border-left: 1px solid #F0F0F0;
        font-weight: bold;
        font-family: PingFangSC-Semibold;
        color: #0984F9;
      }
    }
  }
}

14、底部fix按钮（大多数时候都需要加一个蒙层使得小机型不至于透出文字）

<div class="btn-wrap">
  <div class="btn" @click="showModal">
    立即购买
  </div>
</div>
.xieyi-wrap {
  box-sizing: border-box;
  padding-bottom: 90px;
  .btn-wrap{
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    background: #fff;
    width: 100%;
    padding-top: 28px;
    padding-bottom: 14px;
    // 必须 ios < 11.2 支持
    padding-bottom: calc(~"14px + constant(safe-area-inset-bottom)"); 
    // 必须在 ios >= 11.2 才支持  
    padding-bottom: calc(~"14px + env(safe-area-inset-bottom)"); 
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .btn {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 19px;
      // position: fixed;
      // bottom: 20px;
      background: #0984f9;
      border-radius: 2px;
      width: 335px;
      height: 50px;
      box-sizing: border-box;
      // left: 50%;
      // transform: translate(-50%, 0);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .light-blue {
      background: rgba(9, 132, 249, 0.5);
    }
    .grey {
      background: #ddd;
    }
  }
}

/* iphoneX、iphoneXs 、iphone Xs Max 、iphone XR 带底部黑色横条的*/
@media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (max-device-height: 896px) and (-webkit-min-device-pixel-ratio: 2){
  .xieyi-wrap{
    padding-bottom: 104px;
  }
}

15、vue禁止默认事件并重写（这里是重写了删除操作，不管光标什么位置删除，每次都从最后一位开始删除）

      <input autofocus="autofocus" @focus="addEventListener" maxlength="6" class="simple-input" v-model="simpleInput" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码">

addEventListener() {
  window.addEventListener('keydown', this.keyFun, true)
},
// 监听回退删除操作，不管光标在哪都删除1个字符
keyFun(event) {
  if (event.keyCode === 8) {
    // 阻止默认事件
    event.preventDefault()
    this.simpleInput = this.simpleInput.slice(0, this.simpleInput.length - 1)
  }
},

16、disable的遮罩mask效果

.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.60) 0%, #FFFFFF 87%, #FFFFFF 100%);
    border-radius: 5px;
  }

17、移动端常用input样式

input{
        text-indent: 0;
        background: transparent;
        border: 0 none;
        resize:none; 
        outline:none;  /*清除选中效果的默认蓝色边框 */
        -webkit-appearance:none;  /*清除浏览器默认的样式 */
        line-height: normal;   //光标问题 
    }
    input::-webkit-input-placeholder { /* WebKit browsers */
        line-height: 0.44rem;   //placeholder
    }
    input:focus {
        color: #8b8791;
    }

18、三个元素等分排列，分割线在元素中间

解决方案是flex布局，元素设置flex：1，border right设置一下即可，有左侧间距的话设置一下间距

19、多行排列

使用flex布局，使用flex-flow: wrap;即可